@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
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy(JSON.parse("[[\"xplor-alert-dialog_60.cjs\",[[6,\"xplor-btn-tooltip\",{\"text\":[1],\"tooltipText\":[1,\"tooltip-text\"],\"tooltipPosition\":[1,\"tooltip-position\"],\"type\":[1],\"mode\":[1],\"iconPosition\":[1,\"icon-position\"],\"disabled\":[4]}],[1,\"xplor-chat-widget\",{\"languageOptions\":[16,\"language-options\"],\"textId\":[1,\"text-id\"],\"apiKey\":[1,\"api-key\"],\"selectedLanguage\":[32],\"textValue\":[32]}],[6,\"xplor-avatar-and-name\",{\"name\":[1],\"src\":[1],\"size\":[1],\"color\":[1],\"status\":[1]}],[2,\"xplor-date-picker\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"type\":[1],\"monthType\":[1,\"month-type\"],\"display\":[1],\"dateFormat\":[1,\"date-format\"],\"min\":[1],\"max\":[1],\"readonly\":[4],\"disabled\":[4],\"clearable\":[4],\"closeOnSelect\":[4,\"close-on-select\"],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"startWeekOnSunday\":[4,\"start-week-on-sunday\"],\"error\":[1],\"hideDetails\":[8,\"hide-details\"],\"required\":[4],\"isOpen\":[32],\"inputText\":[32],\"dropdownPosition\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[2,\"xplor-drag-and-drop-input\",{\"disabled\":[4],\"accepts\":[1],\"label\":[1],\"browseLabel\":[1,\"browse-label\"],\"ariaLabel\":[1,\"aria-label\"],\"progress\":[2],\"dragover\":[32],\"currentFile\":[32],\"horizontal\":[32],\"clearCurrentFile\":[64]}],[2,\"xplor-input-send\",{\"placeholder\":[1],\"disabled\":[4],\"maxLength\":[2,\"max-length\"],\"value\":[1025],\"buttonText\":[1,\"button-text\"],\"buttonType\":[1,\"button-type\"],\"internalValue\":[32]}],[4,\"xplor-modal-persistent\",{\"open\":[4],\"width\":[1],\"maxWidth\":[1,\"max-width\"],\"maxHeight\":[1,\"max-height\"],\"loading\":[4]}],[6,\"xplor-alert-dialog\",{\"open\":[1028],\"width\":[1],\"persistent\":[4],\"ariaLabel\":[1,\"aria-label\"]},[[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[\"handleOpenChange\"]}],[6,\"xplor-alert-message\",{\"type\":[1],\"alertTitle\":[1,\"alert-title\"],\"dismissible\":[4]}],[2,\"xplor-assistant\",{\"apiEndpoint\":[1,\"api-endpoint\"],\"userId\":[1,\"user-id\"],\"userEmail\":[1,\"user-email\"],\"userName\":[1,\"user-name\"],\"sessionId\":[1,\"session-id\"],\"quickReplies\":[16,\"quick-replies\"],\"placeholder\":[1],\"enableVoiceInput\":[4,\"enable-voice-input\"],\"enableTextToSpeech\":[4,\"enable-text-to-speech\"],\"autoSpeak\":[4,\"auto-speak\"],\"maxHeight\":[1,\"max-height\"],\"disabled\":[4],\"messages\":[32],\"internalSessionId\":[32],\"isLoading\":[32],\"isListening\":[32],\"isSpeaking\":[32],\"error\":[32],\"inputValue\":[32],\"hasVoiceSupport\":[32],\"hasTTSSupport\":[32],\"sendMessage\":[64],\"clearHistory\":[64],\"speak\":[64],\"stopSpeaking\":[64]},null,{\"sessionId\":[\"handleSessionIdChange\"]}],[2,\"xplor-autocomplete\",{\"items\":[16],\"value\":[1032],\"placeholder\":[1],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"readonly\":[4],\"clearable\":[4],\"multiple\":[4],\"minSearchLength\":[2,\"min-search-length\"],\"itemValue\":[1,\"item-value\"],\"itemText\":[1,\"item-text\"],\"menuMaxWidth\":[1,\"menu-max-width\"],\"renderItem\":[16,\"render-item\"],\"renderSelection\":[16,\"render-selection\"],\"isOpen\":[32],\"searchQuery\":[32],\"filteredItems\":[32],\"selectedItems\":[32],\"highlightedIndex\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[6,\"xplor-badge\",{\"backgroundColor\":[1,\"background-color\"],\"color\":[1],\"threshold\":[2],\"variant\":[1],\"size\":[1],\"datatable\":[4],\"text\":[1]}],[2,\"xplor-badge-active\"],[2,\"xplor-badge-archived\"],[2,\"xplor-badge-deleted\"],[2,\"xplor-badge-expired\"],[2,\"xplor-badge-inactive\"],[2,\"xplor-badge-recalled\"],[6,\"xplor-badge-session-booking\",{\"booking\":[16],\"item\":[16]}],[2,\"xplor-badge-upcoming\"],[2,\"xplor-badge-waitlist\"],[6,\"xplor-btn-back\",{\"color\":[1],\"minWidth\":[1,\"min-width\"],\"minHeight\":[1,\"min-height\"],\"gap\":[1],\"disabled\":[4]}],[2,\"xplor-btn-back-to-parent\",{\"size\":[1],\"inline\":[4],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"variant\":[1],\"ariaLabel\":[1,\"aria-label\"]}],[6,\"xplor-btn-icon\",{\"color\":[1],\"size\":[8],\"iconSize\":[8,\"icon-size\"],\"variant\":[1],\"disabled\":[4],\"ariaLabel\":[1,\"aria-label\"]}],[6,\"xplor-btn-menu\",{\"ariaLabel\":[1,\"aria-label\"],\"label\":[1],\"options\":[16],\"hiddenKeys\":[16,\"hidden-keys\"],\"disabledKeys\":[16,\"disabled-keys\"],\"color\":[1],\"density\":[1],\"show\":[32],\"focusedIndex\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[6,\"xplor-btn-toggle\",{\"active\":[1028],\"color\":[1],\"disabled\":[4],\"inactiveOutlined\":[4,\"inactive-outlined\"]}],[6,\"xplor-btn-toggle-group\",{\"multiple\":[4],\"density\":[1]}],[6,\"xplor-btn-toggle-secondary\",{\"active\":[1028],\"disabled\":[4],\"inactiveOutlined\":[4,\"inactive-outlined\"]}],[2,\"xplor-canvas-editor\",{\"width\":[2],\"height\":[2],\"tool\":[1],\"shapes\":[32],\"selectedId\":[32],\"activeTool\":[32],\"draftShape\":[32],\"clearAll\":[64],\"getShapes\":[64]}],[1,\"xplor-checkbox\",{\"initialChecked\":[4,\"initial-checked\"],\"initialIndeterminate\":[4,\"initial-indeterminate\"],\"disabled\":[4],\"error\":[4],\"label\":[1],\"checked\":[32],\"indeterminate\":[32],\"isHovered\":[32],\"isFocused\":[32],\"isPressed\":[32]},null,{\"initialChecked\":[\"watchCheckedProp\"],\"initialIndeterminate\":[\"watchIndeterminateProp\"]}],[2,\"xplor-combobox\",{\"items\":[16],\"value\":[1032],\"placeholder\":[1],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"readonly\":[4],\"clearable\":[4],\"multiple\":[4],\"allowCustom\":[4,\"allow-custom\"],\"createMessage\":[1,\"create-message\"],\"isOpen\":[32],\"searchQuery\":[32],\"filteredItems\":[32],\"selectedItems\":[32],\"highlightedIndex\":[32],\"customItems\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[1,\"xplor-datatable\",{\"headers\":[16],\"items\":[16],\"loading\":[4],\"pagination\":[16],\"selected\":[16],\"canSelect\":[4,\"can-select\"],\"horizontalLines\":[4,\"horizontal-lines\"],\"striped\":[4],\"height\":[8],\"skeletonLoader\":[4,\"skeleton-loader\"],\"hover\":[4],\"perPageOptions\":[16,\"per-page-options\"],\"sortBy\":[32],\"sortDirection\":[32],\"internalSelected\":[32],\"allSelected\":[32]},null,{\"selected\":[\"watchSelected\"],\"items\":[\"watchItems\"]}],[6,\"xplor-expansion-panel\",{\"disabled\":[4],\"open\":[1028],\"panelId\":[32],\"contentHeight\":[32]}],[6,\"xplor-expansion-panels\",{\"value\":[1025],\"multiple\":[4],\"accordion\":[4],\"openPanels\":[32]},[[0,\"xplorPanelToggle\",\"handlePanelToggle\"]]],[2,\"xplor-file-upload\",{\"accepts\":[1],\"maxSize\":[2,\"max-size\"],\"multiple\":[4],\"disabled\":[4],\"showPreview\":[4,\"show-preview\"],\"label\":[1],\"files\":[32],\"isDragging\":[32],\"error\":[32]}],[6,\"xplor-inline-checkbox\",{\"checked\":[1028],\"value\":[8],\"color\":[1],\"disabled\":[4],\"indeterminate\":[4],\"label\":[1]}],[6,\"xplor-inline-switch\",{\"checked\":[1028],\"value\":[8],\"color\":[1],\"disabled\":[4],\"label\":[1]}],[2,\"xplor-input-file\",{\"label\":[1],\"placeholder\":[1],\"color\":[1],\"disabled\":[4],\"multiple\":[4],\"accept\":[1],\"maxChips\":[2,\"max-chips\"],\"counter\":[4],\"showSize\":[2,\"show-size\"],\"prependInnerIcon\":[1,\"prepend-inner-icon\"],\"selectedFiles\":[32]}],[6,\"xplor-input-search\",{\"value\":[1025],\"placeholder\":[1],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"disabled\":[4],\"density\":[1],\"isFocused\":[32]}],[2,\"xplor-input-select\",{\"ariaLabel\":[1,\"aria-label\"],\"value\":[1032],\"label\":[1],\"placeholder\":[1],\"options\":[16],\"multiple\":[4],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"disabled\":[4],\"readonly\":[4],\"hideDetails\":[8,\"hide-details\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"required\":[4],\"isOpen\":[32],\"isFocused\":[32],\"menuPosition\":[32],\"highlightedIndex\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[6,\"xplor-input-text\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"type\":[1],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"disabled\":[4],\"readonly\":[4],\"hideDetails\":[8,\"hide-details\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"required\":[4],\"isFocused\":[32]}],[2,\"xplor-input-text-area\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"disabled\":[4],\"readonly\":[4],\"clearable\":[4],\"rows\":[2],\"hideDetails\":[8,\"hide-details\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"required\":[4],\"isFocused\":[32]}],[6,\"xplor-input-text-secondary\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"type\":[1],\"bgColor\":[1,\"bg-color\"],\"disabled\":[4],\"readonly\":[4],\"hideDetails\":[8,\"hide-details\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"required\":[4],\"isDirty\":[4,\"is-dirty\"],\"isFocused\":[32]}],[2,\"xplor-input-title\",{\"value\":[1025],\"placeholder\":[1],\"disabled\":[4],\"readonly\":[4],\"ariaLabel\":[1,\"aria-label\"]}],[1,\"xplor-links\",{\"brand\":[1],\"imageAlt\":[1,\"image-alt\"]}],[6,\"xplor-nav-tabs\",{\"value\":[1025],\"items\":[16],\"color\":[1],\"grow\":[4]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"xplor-radio-btn\",{\"label\":[1],\"value\":[1],\"name\":[1],\"initialChecked\":[4,\"initial-checked\"],\"disabled\":[4],\"error\":[4],\"checked\":[32],\"isHovered\":[32],\"isFocused\":[32],\"isPressed\":[32],\"deselect\":[64]},null,{\"initialChecked\":[\"watchCheckedProp\"]}],[2,\"xplor-rich-text-editor\",{\"value\":[1025],\"legacySlateDocument\":[1,\"legacy-slate-document\"],\"placeholder\":[1],\"label\":[1],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"ariaLabel\":[1,\"aria-label\"],\"ariaLabelledBy\":[1,\"aria-labelled-by\"],\"toolbar\":[1],\"maxLength\":[2,\"max-length\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"editorVersion\":[32],\"isFocused\":[32],\"showLinkPopover\":[32],\"linkUrl\":[32],\"charCount\":[32],\"getHTMLContent\":[64],\"getText\":[64],\"setContent\":[64],\"clearContent\":[64],\"focusEditor\":[64]},null,{\"value\":[\"handleValueChange\"],\"readonly\":[\"handleReadonlyChange\"],\"disabled\":[\"handleDisabledChange\"],\"legacySlateDocument\":[\"handleLegacyDocChange\"]}],[6,\"xplor-section-card\",{\"outlined\":[4],\"rounded\":[4],\"padding\":[1]}],[6,\"xplor-section-heading\",{\"size\":[1],\"text\":[1],\"level\":[2]}],[1,\"xplor-table\",{\"columns\":[16],\"data\":[16],\"freeze\":[4],\"multiselect\":[4],\"striped\":[4],\"selectedValues\":[16,\"selected-values\"],\"isSortable\":[4,\"is-sortable\"],\"sortableColumns\":[16,\"sortable-columns\"],\"areAllSelected\":[32],\"rowData\":[32],\"hasScrolled\":[32],\"selected\":[32],\"sortTypeArray\":[32],\"selectedDateRange\":[32],\"currentPage\":[32],\"totalPages\":[32]},null,{\"data\":[\"watchData\"]}],[6,\"xplor-text-bubble\",{\"color\":[1]}],[6,\"xplor-text-field\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"type\":[1],\"color\":[1],\"variant\":[1],\"bgColor\":[1,\"bg-color\"],\"errorMessages\":[16,\"error-messages\"],\"hideDetails\":[8,\"hide-details\"],\"disabled\":[4],\"readonly\":[4],\"required\":[4],\"isDirty\":[4,\"is-dirty\"],\"clearable\":[4],\"customClass\":[1,\"custom-class\"],\"maxlength\":[2],\"min\":[2],\"max\":[2],\"isFocused\":[32],\"hasValue\":[32]},null,{\"value\":[\"handleValueChange\"]}],[2,\"xplor-time-picker\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"clearable\":[4],\"prefill\":[4],\"bgColor\":[1,\"bg-color\"],\"showSeconds\":[4,\"show-seconds\"],\"disabled\":[4],\"readonly\":[4],\"error\":[1],\"hideDetails\":[8,\"hide-details\"],\"required\":[4],\"isOpen\":[32],\"inputText\":[32],\"hours\":[32],\"minutes\":[32],\"seconds\":[32],\"period\":[32],\"lastGoodValue\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[1,\"xplor-avatar\",{\"color\":[1],\"disabled\":[4],\"href\":[1],\"name\":[1],\"size\":[1],\"src\":[1],\"status\":[1],\"target\":[1]}],[1,\"xplor-dropdown\",{\"options\":[16],\"selected\":[1],\"handleChange\":[16,\"handle-change\"]}],[2,\"xplor-inline-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"readonly\":[4],\"color\":[1],\"startWeekOnSunday\":[4,\"start-week-on-sunday\"],\"currentYear\":[32],\"currentMonth\":[32],\"viewDate\":[32],\"focusedDay\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[6,\"xplor-modal\",{\"open\":[1028],\"width\":[1],\"maxWidth\":[1,\"max-width\"],\"maxHeight\":[1,\"max-height\"],\"scrollable\":[4],\"persistent\":[4],\"loading\":[4],\"showTitle\":[4,\"show-title\"],\"ariaLabel\":[1,\"aria-label\"]},[[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[\"handleOpenChange\"]}],[6,\"xplor-tooltip\",{\"position\":[1],\"trigger\":[1],\"arrow\":[4],\"open\":[1028],\"content\":[1],\"disabled\":[4],\"tooltipStyle\":[32],\"arrowStyle\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[6,\"xplor-button\",{\"text\":[1],\"type\":[1],\"mode\":[1],\"size\":[1],\"styles\":[1],\"clickAction\":[16,\"click-action\"],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"fullWidth\":[516,\"full-width\"],\"iconPosition\":[1,\"icon-position\"],\"icon\":[1],\"iconSvg\":[1,\"icon-svg\"]}]]]]"), options);
|
|
21
|
+
return index.bootstrapLazy(JSON.parse("[[\"xplor-alert-dialog_60.cjs\",[[6,\"xplor-btn-tooltip\",{\"text\":[1],\"tooltipText\":[1,\"tooltip-text\"],\"tooltipPosition\":[1,\"tooltip-position\"],\"type\":[1],\"mode\":[1],\"iconPosition\":[1,\"icon-position\"],\"disabled\":[4]}],[1,\"xplor-chat-widget\",{\"languageOptions\":[16,\"language-options\"],\"textId\":[1,\"text-id\"],\"apiKey\":[1,\"api-key\"],\"selectedLanguage\":[32],\"textValue\":[32]}],[6,\"xplor-avatar-and-name\",{\"name\":[1],\"src\":[1],\"size\":[1],\"color\":[1],\"status\":[1]}],[2,\"xplor-date-picker\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"type\":[1],\"monthType\":[1,\"month-type\"],\"display\":[1],\"dateFormat\":[1,\"date-format\"],\"min\":[1],\"max\":[1],\"readonly\":[4],\"disabled\":[4],\"clearable\":[4],\"closeOnSelect\":[4,\"close-on-select\"],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"startWeekOnSunday\":[4,\"start-week-on-sunday\"],\"error\":[1],\"hideDetails\":[8,\"hide-details\"],\"required\":[4],\"isOpen\":[32],\"inputText\":[32],\"dropdownPosition\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[2,\"xplor-drag-and-drop-input\",{\"disabled\":[4],\"accepts\":[1],\"label\":[1],\"browseLabel\":[1,\"browse-label\"],\"ariaLabel\":[1,\"aria-label\"],\"progress\":[2],\"dragover\":[32],\"currentFile\":[32],\"horizontal\":[32],\"clearCurrentFile\":[64]}],[2,\"xplor-input-send\",{\"placeholder\":[1],\"disabled\":[4],\"maxLength\":[2,\"max-length\"],\"value\":[1025],\"buttonText\":[1,\"button-text\"],\"buttonType\":[1,\"button-type\"],\"internalValue\":[32]}],[4,\"xplor-modal-persistent\",{\"open\":[4],\"width\":[1],\"maxWidth\":[1,\"max-width\"],\"maxHeight\":[1,\"max-height\"],\"loading\":[4]}],[6,\"xplor-alert-dialog\",{\"open\":[1028],\"width\":[1],\"persistent\":[4],\"ariaLabel\":[1,\"aria-label\"]},[[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[\"handleOpenChange\"]}],[6,\"xplor-alert-message\",{\"type\":[1],\"alertTitle\":[1,\"alert-title\"],\"dismissible\":[4]}],[2,\"xplor-assistant\",{\"apiEndpoint\":[1,\"api-endpoint\"],\"userId\":[1,\"user-id\"],\"userEmail\":[1,\"user-email\"],\"userName\":[1,\"user-name\"],\"sessionId\":[1,\"session-id\"],\"quickReplies\":[16,\"quick-replies\"],\"placeholder\":[1],\"enableVoiceInput\":[4,\"enable-voice-input\"],\"enableTextToSpeech\":[4,\"enable-text-to-speech\"],\"autoSpeak\":[4,\"auto-speak\"],\"maxHeight\":[1,\"max-height\"],\"disabled\":[4],\"messages\":[32],\"internalSessionId\":[32],\"isLoading\":[32],\"isListening\":[32],\"isSpeaking\":[32],\"error\":[32],\"inputValue\":[32],\"hasVoiceSupport\":[32],\"hasTTSSupport\":[32],\"sendMessage\":[64],\"clearHistory\":[64],\"speak\":[64],\"stopSpeaking\":[64]},null,{\"sessionId\":[\"handleSessionIdChange\"]}],[2,\"xplor-autocomplete\",{\"items\":[16],\"value\":[1032],\"placeholder\":[1],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"readonly\":[4],\"clearable\":[4],\"multiple\":[4],\"minSearchLength\":[2,\"min-search-length\"],\"itemValue\":[1,\"item-value\"],\"itemText\":[1,\"item-text\"],\"menuMaxWidth\":[1,\"menu-max-width\"],\"renderItem\":[16,\"render-item\"],\"renderSelection\":[16,\"render-selection\"],\"isOpen\":[32],\"searchQuery\":[32],\"filteredItems\":[32],\"selectedItems\":[32],\"highlightedIndex\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[6,\"xplor-badge\",{\"backgroundColor\":[1,\"background-color\"],\"color\":[1],\"threshold\":[2],\"variant\":[1],\"size\":[1],\"datatable\":[4],\"text\":[1]}],[2,\"xplor-badge-active\"],[2,\"xplor-badge-archived\"],[2,\"xplor-badge-deleted\"],[2,\"xplor-badge-expired\"],[2,\"xplor-badge-inactive\"],[2,\"xplor-badge-recalled\"],[6,\"xplor-badge-session-booking\",{\"booking\":[16],\"item\":[16]}],[2,\"xplor-badge-upcoming\"],[2,\"xplor-badge-waitlist\"],[6,\"xplor-btn-back\",{\"color\":[1],\"minWidth\":[1,\"min-width\"],\"minHeight\":[1,\"min-height\"],\"gap\":[1],\"disabled\":[4]}],[2,\"xplor-btn-back-to-parent\",{\"size\":[1],\"inline\":[4],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"variant\":[1],\"ariaLabel\":[1,\"aria-label\"]}],[6,\"xplor-btn-icon\",{\"color\":[1],\"size\":[8],\"iconSize\":[8,\"icon-size\"],\"variant\":[1],\"disabled\":[4],\"ariaLabel\":[1,\"aria-label\"]}],[6,\"xplor-btn-menu\",{\"ariaLabel\":[1,\"aria-label\"],\"label\":[1],\"options\":[16],\"hiddenKeys\":[16,\"hidden-keys\"],\"disabledKeys\":[16,\"disabled-keys\"],\"color\":[1],\"density\":[1],\"show\":[32],\"focusedIndex\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[6,\"xplor-btn-toggle\",{\"active\":[1028],\"color\":[1],\"disabled\":[4],\"inactiveOutlined\":[4,\"inactive-outlined\"]}],[6,\"xplor-btn-toggle-group\",{\"multiple\":[4],\"density\":[1]}],[6,\"xplor-btn-toggle-secondary\",{\"active\":[1028],\"disabled\":[4],\"inactiveOutlined\":[4,\"inactive-outlined\"]}],[2,\"xplor-canvas-editor\",{\"width\":[2],\"height\":[2],\"tool\":[1],\"shapes\":[32],\"selectedId\":[32],\"activeTool\":[32],\"draftShape\":[32],\"clearAll\":[64],\"getShapes\":[64]}],[1,\"xplor-checkbox\",{\"initialChecked\":[4,\"initial-checked\"],\"initialIndeterminate\":[4,\"initial-indeterminate\"],\"disabled\":[4],\"error\":[4],\"label\":[1],\"checked\":[32],\"indeterminate\":[32],\"isHovered\":[32],\"isFocused\":[32],\"isPressed\":[32]},null,{\"initialChecked\":[\"watchCheckedProp\"],\"initialIndeterminate\":[\"watchIndeterminateProp\"]}],[2,\"xplor-combobox\",{\"items\":[16],\"value\":[1032],\"placeholder\":[1],\"label\":[1],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"readonly\":[4],\"clearable\":[4],\"multiple\":[4],\"allowCustom\":[4,\"allow-custom\"],\"createMessage\":[1,\"create-message\"],\"isOpen\":[32],\"searchQuery\":[32],\"filteredItems\":[32],\"selectedItems\":[32],\"highlightedIndex\":[32],\"customItems\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[1,\"xplor-datatable\",{\"headers\":[16],\"items\":[16],\"loading\":[4],\"pagination\":[16],\"selected\":[16],\"canSelect\":[4,\"can-select\"],\"horizontalLines\":[4,\"horizontal-lines\"],\"striped\":[4],\"height\":[8],\"skeletonLoader\":[4,\"skeleton-loader\"],\"hover\":[4],\"perPageOptions\":[16,\"per-page-options\"],\"sortBy\":[32],\"sortDirection\":[32],\"internalSelected\":[32],\"allSelected\":[32]},null,{\"selected\":[\"watchSelected\"],\"items\":[\"watchItems\"]}],[6,\"xplor-expansion-panel\",{\"disabled\":[4],\"open\":[1028],\"panelId\":[32],\"contentHeight\":[32]}],[6,\"xplor-expansion-panels\",{\"value\":[1025],\"multiple\":[4],\"accordion\":[4],\"openPanels\":[32]},[[0,\"xplorPanelToggle\",\"handlePanelToggle\"]]],[2,\"xplor-file-upload\",{\"accepts\":[1],\"maxSize\":[2,\"max-size\"],\"multiple\":[4],\"disabled\":[4],\"showPreview\":[4,\"show-preview\"],\"label\":[1],\"files\":[32],\"isDragging\":[32],\"error\":[32]}],[6,\"xplor-inline-checkbox\",{\"checked\":[1028],\"value\":[8],\"color\":[1],\"disabled\":[4],\"indeterminate\":[4],\"label\":[1]}],[6,\"xplor-inline-switch\",{\"checked\":[1028],\"value\":[8],\"color\":[1],\"disabled\":[4],\"label\":[1]}],[2,\"xplor-input-file\",{\"label\":[1],\"placeholder\":[1],\"color\":[1],\"disabled\":[4],\"multiple\":[4],\"accept\":[1],\"maxChips\":[2,\"max-chips\"],\"counter\":[4],\"showSize\":[2,\"show-size\"],\"prependInnerIcon\":[1,\"prepend-inner-icon\"],\"selectedFiles\":[32]}],[6,\"xplor-input-search\",{\"value\":[1025],\"placeholder\":[1],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"disabled\":[4],\"density\":[1],\"isFocused\":[32]}],[2,\"xplor-input-select\",{\"ariaLabel\":[1,\"aria-label\"],\"value\":[1032],\"label\":[1],\"placeholder\":[1],\"options\":[16],\"multiple\":[4],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"disabled\":[4],\"readonly\":[4],\"hideDetails\":[8,\"hide-details\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"required\":[4],\"isOpen\":[32],\"isFocused\":[32],\"menuPosition\":[32],\"highlightedIndex\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[6,\"xplor-input-text\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"type\":[1],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"disabled\":[4],\"readonly\":[4],\"hideDetails\":[8,\"hide-details\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"required\":[4],\"isFocused\":[32]}],[2,\"xplor-input-text-area\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"bgColor\":[1,\"bg-color\"],\"color\":[1],\"disabled\":[4],\"readonly\":[4],\"clearable\":[4],\"rows\":[2],\"hideDetails\":[8,\"hide-details\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"required\":[4],\"isFocused\":[32]}],[6,\"xplor-input-text-secondary\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"type\":[1],\"bgColor\":[1,\"bg-color\"],\"disabled\":[4],\"readonly\":[4],\"hideDetails\":[8,\"hide-details\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"required\":[4],\"isDirty\":[4,\"is-dirty\"],\"isFocused\":[32]}],[2,\"xplor-input-title\",{\"value\":[1025],\"placeholder\":[1],\"disabled\":[4],\"readonly\":[4],\"ariaLabel\":[1,\"aria-label\"]}],[1,\"xplor-links\",{\"brand\":[1],\"imageAlt\":[1,\"image-alt\"]}],[6,\"xplor-nav-tabs\",{\"value\":[1025],\"items\":[16],\"color\":[1],\"grow\":[4]},[[0,\"keydown\",\"handleKeyDown\"]]],[1,\"xplor-radio-btn\",{\"label\":[1],\"value\":[1],\"name\":[1],\"initialChecked\":[4,\"initial-checked\"],\"disabled\":[4],\"error\":[4],\"checked\":[32],\"isHovered\":[32],\"isFocused\":[32],\"isPressed\":[32],\"deselect\":[64]},null,{\"initialChecked\":[\"watchCheckedProp\"]}],[2,\"xplor-rich-text-editor\",{\"value\":[1025],\"legacySlateDocument\":[1,\"legacy-slate-document\"],\"placeholder\":[1],\"label\":[1],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"ariaLabel\":[1,\"aria-label\"],\"ariaLabelledBy\":[1,\"aria-labelled-by\"],\"toolbar\":[1],\"maxLength\":[2,\"max-length\"],\"error\":[1],\"helperText\":[1,\"helper-text\"],\"editorVersion\":[32],\"isFocused\":[32],\"showLinkPopover\":[32],\"linkUrl\":[32],\"charCount\":[32],\"getHTMLContent\":[64],\"getText\":[64],\"setContent\":[64],\"clearContent\":[64],\"focusEditor\":[64]},null,{\"value\":[\"handleValueChange\"],\"readonly\":[\"handleReadonlyChange\"],\"disabled\":[\"handleDisabledChange\"],\"legacySlateDocument\":[\"handleLegacyDocChange\"]}],[6,\"xplor-section-card\",{\"outlined\":[4],\"rounded\":[4],\"padding\":[1]}],[6,\"xplor-section-heading\",{\"size\":[1],\"text\":[1],\"level\":[2]}],[1,\"xplor-table\",{\"columns\":[16],\"data\":[16],\"freeze\":[4],\"multiselect\":[4],\"striped\":[4],\"selectedValues\":[16,\"selected-values\"],\"isSortable\":[4,\"is-sortable\"],\"sortableColumns\":[16,\"sortable-columns\"],\"areAllSelected\":[32],\"rowData\":[32],\"hasScrolled\":[32],\"selected\":[32],\"sortTypeArray\":[32],\"selectedDateRange\":[32],\"currentPage\":[32],\"totalPages\":[32]},null,{\"data\":[\"watchData\"]}],[6,\"xplor-text-bubble\",{\"color\":[1]}],[6,\"xplor-text-field\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"type\":[1],\"color\":[1],\"variant\":[1],\"bgColor\":[1,\"bg-color\"],\"errorMessages\":[16,\"error-messages\"],\"hideDetails\":[8,\"hide-details\"],\"disabled\":[4],\"readonly\":[4],\"required\":[4],\"isDirty\":[4,\"is-dirty\"],\"clearable\":[4],\"customClass\":[1,\"custom-class\"],\"maxlength\":[2],\"min\":[2],\"max\":[2],\"isFocused\":[32],\"hasValue\":[32]},null,{\"value\":[\"handleValueChange\"]}],[2,\"xplor-time-picker\",{\"value\":[1025],\"label\":[1],\"placeholder\":[1],\"clearable\":[4],\"prefill\":[4],\"bgColor\":[1,\"bg-color\"],\"showSeconds\":[4,\"show-seconds\"],\"disabled\":[4],\"readonly\":[4],\"error\":[1],\"hideDetails\":[8,\"hide-details\"],\"required\":[4],\"isOpen\":[32],\"inputText\":[32],\"hours\":[32],\"minutes\":[32],\"seconds\":[32],\"period\":[32],\"lastGoodValue\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[1,\"xplor-avatar\",{\"color\":[1],\"disabled\":[4],\"href\":[1],\"name\":[1],\"size\":[1],\"src\":[1],\"status\":[1],\"target\":[1]}],[1,\"xplor-dropdown\",{\"options\":[16],\"selected\":[1],\"handleChange\":[16,\"handle-change\"]}],[2,\"xplor-inline-date-picker\",{\"selectedDate\":[1025,\"selected-date\"],\"min\":[1],\"max\":[1],\"readonly\":[4],\"color\":[1],\"startWeekOnSunday\":[4,\"start-week-on-sunday\"],\"currentYear\":[32],\"currentMonth\":[32],\"viewDate\":[32],\"focusedDay\":[32]},[[0,\"keydown\",\"handleKeyDown\"]]],[6,\"xplor-modal\",{\"open\":[1028],\"width\":[1],\"maxWidth\":[1,\"max-width\"],\"maxHeight\":[1,\"max-height\"],\"scrollable\":[4],\"persistent\":[4],\"loading\":[4],\"showTitle\":[4,\"show-title\"],\"ariaLabel\":[1,\"aria-label\"]},[[0,\"keydown\",\"handleKeyDown\"]],{\"open\":[\"handleOpenChange\"]}],[6,\"xplor-tooltip\",{\"position\":[1],\"trigger\":[1],\"arrow\":[4],\"open\":[1028],\"content\":[1],\"disabled\":[4],\"tooltipStyle\":[32],\"arrowStyle\":[32]},[[4,\"click\",\"handleDocumentClick\"]]],[6,\"xplor-button\",{\"text\":[1],\"type\":[1],\"mode\":[1],\"size\":[1],\"styles\":[1],\"clickAction\":[16,\"click-action\"],\"ariaLabel\":[1,\"aria-label\"],\"disabled\":[4],\"fullWidth\":[516,\"full-width\"],\"fullWidthAttr\":[4,\"fullwidth\"],\"iconPosition\":[1,\"icon-position\"],\"icon\":[1],\"iconSvg\":[1,\"icon-svg\"]}]]]]"), options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
|
@@ -3,10 +3,18 @@ export class XplorButton {
|
|
|
3
3
|
constructor() {
|
|
4
4
|
this.type = 'secondary';
|
|
5
5
|
this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
|
|
6
|
+
/** Accessible label for icon-only buttons */
|
|
7
|
+
this.ariaLabel = null;
|
|
6
8
|
/** Whether the button is disabled */
|
|
7
9
|
this.disabled = false;
|
|
8
10
|
/** Whether the button stretches to full width of its container */
|
|
9
11
|
this.fullWidth = false;
|
|
12
|
+
/** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */
|
|
13
|
+
this.fullWidthAttr = false;
|
|
14
|
+
/**
|
|
15
|
+
* Icon position: 'start' | 'end' | null
|
|
16
|
+
*/
|
|
17
|
+
this.iconPosition = null;
|
|
10
18
|
/**
|
|
11
19
|
* Icon to display (defaults to plus sign)
|
|
12
20
|
*/
|
|
@@ -19,9 +27,10 @@ export class XplorButton {
|
|
|
19
27
|
return (h("span", { class: "button-icon" }, this.icon));
|
|
20
28
|
}
|
|
21
29
|
render() {
|
|
30
|
+
const isFullWidth = this.fullWidth || this.fullWidthAttr;
|
|
22
31
|
const isIconOnly = !this.text && this.iconPosition !== null;
|
|
23
32
|
const hasIcon = this.iconPosition !== null;
|
|
24
|
-
return (h(Host, { key: '
|
|
33
|
+
return (h(Host, { key: '7e1c935559697792d2309c397baa4c9614afc136', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: 'c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a' }, 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 && h("span", { key: '09bbac7ae367a56a5a23ff5d010ee453ddc09499', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
|
|
25
34
|
}
|
|
26
35
|
static get is() { return "xplor-button"; }
|
|
27
36
|
static get encapsulation() { return "scoped"; }
|
|
@@ -47,7 +56,7 @@ export class XplorButton {
|
|
|
47
56
|
"references": {}
|
|
48
57
|
},
|
|
49
58
|
"required": false,
|
|
50
|
-
"optional":
|
|
59
|
+
"optional": true,
|
|
51
60
|
"docs": {
|
|
52
61
|
"tags": [],
|
|
53
62
|
"text": ""
|
|
@@ -144,7 +153,7 @@ export class XplorButton {
|
|
|
144
153
|
"references": {}
|
|
145
154
|
},
|
|
146
155
|
"required": false,
|
|
147
|
-
"optional":
|
|
156
|
+
"optional": true,
|
|
148
157
|
"docs": {
|
|
149
158
|
"tags": [],
|
|
150
159
|
"text": ""
|
|
@@ -157,7 +166,7 @@ export class XplorButton {
|
|
|
157
166
|
"attribute": "aria-label",
|
|
158
167
|
"mutable": false,
|
|
159
168
|
"complexType": {
|
|
160
|
-
"original": "string",
|
|
169
|
+
"original": "string | null",
|
|
161
170
|
"resolved": "string",
|
|
162
171
|
"references": {}
|
|
163
172
|
},
|
|
@@ -169,7 +178,8 @@ export class XplorButton {
|
|
|
169
178
|
},
|
|
170
179
|
"getter": false,
|
|
171
180
|
"setter": false,
|
|
172
|
-
"reflect": false
|
|
181
|
+
"reflect": false,
|
|
182
|
+
"defaultValue": "null"
|
|
173
183
|
},
|
|
174
184
|
"disabled": {
|
|
175
185
|
"type": "boolean",
|
|
@@ -211,6 +221,26 @@ export class XplorButton {
|
|
|
211
221
|
"reflect": true,
|
|
212
222
|
"defaultValue": "false"
|
|
213
223
|
},
|
|
224
|
+
"fullWidthAttr": {
|
|
225
|
+
"type": "boolean",
|
|
226
|
+
"attribute": "fullwidth",
|
|
227
|
+
"mutable": false,
|
|
228
|
+
"complexType": {
|
|
229
|
+
"original": "boolean",
|
|
230
|
+
"resolved": "boolean",
|
|
231
|
+
"references": {}
|
|
232
|
+
},
|
|
233
|
+
"required": false,
|
|
234
|
+
"optional": false,
|
|
235
|
+
"docs": {
|
|
236
|
+
"tags": [],
|
|
237
|
+
"text": "Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth)"
|
|
238
|
+
},
|
|
239
|
+
"getter": false,
|
|
240
|
+
"setter": false,
|
|
241
|
+
"reflect": false,
|
|
242
|
+
"defaultValue": "false"
|
|
243
|
+
},
|
|
214
244
|
"iconPosition": {
|
|
215
245
|
"type": "string",
|
|
216
246
|
"attribute": "icon-position",
|
|
@@ -228,7 +258,8 @@ export class XplorButton {
|
|
|
228
258
|
},
|
|
229
259
|
"getter": false,
|
|
230
260
|
"setter": false,
|
|
231
|
-
"reflect": false
|
|
261
|
+
"reflect": false,
|
|
262
|
+
"defaultValue": "null"
|
|
232
263
|
},
|
|
233
264
|
"icon": {
|
|
234
265
|
"type": "string",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xplor-button.js","sourceRoot":"","sources":["../../../src/components/xplor-button/xplor-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAezD,MAAM,OAAO,WAAW;IAbxB;QAeU,SAAI,GAAoF,WAAW,CAAC;QACpG,SAAI,GAA8B,IAAI,CAAC,CAAC,2CAA2C;
|
|
1
|
+
{"version":3,"file":"xplor-button.js","sourceRoot":"","sources":["../../../src/components/xplor-button/xplor-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-button',\n styleUrl: 'xplor-button.scss',\n // we cant use multiple styleUrls because the mode property is not reactive only in stencilJS and once the component is rendered it wont change the css file\n // so we are using only one styleUrl and changing the styles based on the mode property in the class\n // styleUrls: {\n // default: 'xplor-button.scss',\n // dark: 'xplor-button-pg.scss',\n // pg: 'xplor-button-pg.scss',\n // office: 'xplor-button-office.scss',\n // },\n scoped: true,\n})\nexport class XplorButton {\n @Prop() text?: string;\n @Prop() type: 'minimal' | 'primary' | 'secondary' | 'ghost' | 'disabled' | 'success' | 'text' = 'secondary';\n @Prop() mode?: 'dark' | 'pg' | 'office' = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')\n @Prop() size?: string; // 'small', 'medium', 'large' (default:'medium')\n @Prop() styles?: string;\n @Prop() clickAction?: () => void;\n\n /** Accessible label for icon-only buttons */\n @Prop() ariaLabel: string | null = null;\n\n /** Whether the button is disabled */\n @Prop() disabled: boolean = false;\n\n /** Whether the button stretches to full width of its container */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */\n @Prop({ attribute: 'fullwidth' }) fullWidthAttr: boolean = false;\n\n /**\n * Icon position: 'start' | 'end' | null\n */\n @Prop() iconPosition: 'start' | 'end' | null = null;\n\n /**\n * Icon to display (defaults to plus sign)\n */\n @Prop() icon: string = '+';\n @Prop() iconSvg?: string;\n\n private renderIcon() {\n if (this.icon === 'svg' && this.iconSvg) {\n return (\n <span class=\"button-icon button-icon--svg \" innerHTML={this.iconSvg}></span>\n );\n }\n return (\n <span class=\"button-icon\">\n {this.icon}\n </span>\n );\n }\n\n render() {\n const isFullWidth = this.fullWidth || this.fullWidthAttr;\n const isIconOnly = !this.text && this.iconPosition !== null;\n const hasIcon = this.iconPosition !== null;\n\n return (\n <Host class={{ 'x-button--full-width': isFullWidth }}>\n <slot>\n <button\n role=\"button\"\n class={{\n 'x-button': true,\n [this.type]: true,\n 'x-button--full-width': isFullWidth,\n 'x-button--icon-only': isIconOnly,\n 'x-button--with-icon': hasIcon && !isIconOnly,\n 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly,\n 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly,\n ...(this.styles ? { [this.styles]: true } : {}),\n }}\n onClick={() => this.clickAction && this.clickAction()}\n aria-label={this.ariaLabel}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\n >\n {hasIcon && this.iconPosition === 'start' && this.renderIcon()}\n {this.text && <span class=\"button-text\">{this.text}</span>}\n {hasIcon && this.iconPosition === 'end' && this.renderIcon()}\n </button>\n </slot>\n </Host>\n );\n }\n}"]}
|
|
@@ -19,6 +19,10 @@ export class XplorDragAndDropInput {
|
|
|
19
19
|
* Browse button label text
|
|
20
20
|
*/
|
|
21
21
|
this.browseLabel = 'Browse Files';
|
|
22
|
+
/**
|
|
23
|
+
* Accessible label for the drop zone area
|
|
24
|
+
*/
|
|
25
|
+
this.ariaLabel = null;
|
|
22
26
|
/**
|
|
23
27
|
* Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.
|
|
24
28
|
*/
|
|
@@ -151,13 +155,13 @@ export class XplorDragAndDropInput {
|
|
|
151
155
|
render() {
|
|
152
156
|
const progressValue = Math.min(Math.max(this.progress, 0), 100);
|
|
153
157
|
const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
|
|
154
|
-
return (h(Host, { key: '
|
|
158
|
+
return (h(Host, { key: '2eacbaaed09889dd61176cb1f40a1f6d57a500eb' }, h("div", { key: '52736f49694809e2f1e6109938b8c6c20a5a310a', class: { 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal } }, h("div", { key: '601660ed6210fd827ea1f70a6150386fde0cbe85', class: {
|
|
155
159
|
'drag-drop-card': true,
|
|
156
160
|
'drag-drop-card--dragover': this.dragover,
|
|
157
161
|
'drag-drop-card--disabled': this.disabled,
|
|
158
|
-
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: '
|
|
162
|
+
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: '326beba09aea9a50c8a4d1eaaabf3a089f39c7bb', class: "drag-drop-card__content" }, h("div", { key: '44cb69927785334d44183448a70f4fdaea84d4f9', class: "drag-drop-card__body" }, 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" }, 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" }), 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" })), h("div", { key: 'c12e46bb7cd3fa26972ab594ea64f06a05908058', class: "drag-drop-card__text" }, h("h3", { key: 'd9432f6f3f3a7710a2ef29aed828ef44c76658b1', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (h("p", { key: '917e60a73fb80146438559d9f9b1d962e6be3aaa', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())))), h("p", { key: 'f45e185338d8385291aa8e561e573d5a053ff97e', class: "drag-drop-card__divider" }, "or"), h("div", { key: '7a9ad643e13cce967e34299a43967cc757be9020', class: "drag-drop-card__action" }, h("xplor-button", { key: 'e392d2e3779f07834412ece1abce688894ecce22', text: this.browseLabel, type: this.disabled ? 'disabled' : 'primary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (h("div", { key: '6bc899dd7cd5fc411934dd03b81d0c85c93d6fb4', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '262868b9829c96965c68e01d6a4ae17eca16c2c9', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: 'e2213c9e6c37abbd06d6c4c4553b6a1e120c64b8', class: "file-info__card" }, h("div", { key: '3ff619277dfcf66664f80df52ec729572d2e2d37', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: 'c7ede2f02ec8cc66b6c2145f4c2342f9a675835b', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, 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" }))), h("div", { key: 'c704971c9290828ae4ed4385f72fce2cead6bb70', class: "file-info__details" }, h("p", { key: '4a5004f7928e7edc25d1081ce8d8bddd7163d7b8', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'e0781583e2f7021c8c389745ae2d6b25ecc9fba9', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
|
|
159
163
|
? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
|
|
160
|
-
: ''), this.showProgress() && (h("div", { key: '
|
|
164
|
+
: ''), this.showProgress() && (h("div", { key: '893e2190e9b62fb4817824aef28f6f24d89688ba', class: "file-info__progress-row" }, 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)}%` }, h("div", { key: 'fff1ddc5c5913c4928f4afd38bbdc4aec46c5978', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: '0325aeb98bef764a685d46c03da1ccd1c41a9301', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: 'ba5c770c340a739041d387204b582cd5a819e7ad', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, 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" }, 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" })))))), 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 })));
|
|
161
165
|
}
|
|
162
166
|
static get is() { return "xplor-drag-and-drop-input"; }
|
|
163
167
|
static get encapsulation() { return "scoped"; }
|
|
@@ -258,19 +262,20 @@ export class XplorDragAndDropInput {
|
|
|
258
262
|
"attribute": "aria-label",
|
|
259
263
|
"mutable": false,
|
|
260
264
|
"complexType": {
|
|
261
|
-
"original": "string",
|
|
265
|
+
"original": "string | null",
|
|
262
266
|
"resolved": "string",
|
|
263
267
|
"references": {}
|
|
264
268
|
},
|
|
265
269
|
"required": false,
|
|
266
|
-
"optional":
|
|
270
|
+
"optional": false,
|
|
267
271
|
"docs": {
|
|
268
272
|
"tags": [],
|
|
269
273
|
"text": "Accessible label for the drop zone area"
|
|
270
274
|
},
|
|
271
275
|
"getter": false,
|
|
272
276
|
"setter": false,
|
|
273
|
-
"reflect": false
|
|
277
|
+
"reflect": false,
|
|
278
|
+
"defaultValue": "null"
|
|
274
279
|
},
|
|
275
280
|
"progress": {
|
|
276
281
|
"type": "number",
|
package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xplor-drag-and-drop-input.js","sourceRoot":"","sources":["../../../src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAEtG,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAC3C,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAOlC,MAAM,OAAO,qBAAqB;IALlC;QAME;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,YAAO,GAAW,kBAAkB,CAAC;QAE7C;;WAEG;QACK,UAAK,GAAW,+BAA+B,CAAC;QAExD;;WAEG;QACK,gBAAW,GAAW,cAAc,CAAC;QAO7C;;WAEG;QACK,aAAQ,GAAW,CAAC,CAAC,CAAC;QAErB,aAAQ,GAAY,KAAK,CAAC;QAC1B,gBAAW,GAAgB,IAAI,CAAC;QAChC,eAAU,GAAY,KAAK,CAAC;QAgD7B,WAAM,GAAG,CAAC,CAAY,EAAE,EAAE;;YAChC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YAEtB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,MAAM,IAAI,GAAG,MAAA,MAAA,CAAC,CAAC,YAAY,0CAAE,KAAK,0CAAG,CAAC,CAAC,CAAC;YACxC,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACzC,CAAC;QACH,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,CAAY,EAAE,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,CAAY,EAAE,EAAE;YACrC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,CAAY,EAAE,EAAE;YACrC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;;YAClC,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,KAAK,0CAAG,CAAC,CAAC,CAAC;YAC9B,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACzC,CAAC;YACD,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACnB,CAAC,CAAC;QAEM,mBAAc,GAAG,GAAG,EAAE;;YAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;;YAC7B,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,IAAI,OAAO,KAAK,kBAAkB,EAAE,CAAC;gBAC/C,OAAO,GAAG,CAAC;YACb,CAAC;YAED,OAAO,OAAO;iBACX,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;iBAC5B,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;iBACnC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACb,IAAI,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC/B,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;gBACtC,CAAC;gBAED,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC1B,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;gBACtC,CAAC;gBAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC;YAC7B,CAAC,CAAC;iBACD,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAAa,EAAU,EAAE;YACjD,IAAI,KAAK,KAAK,CAAC;gBAAE,OAAO,SAAS,CAAC;YAClC,MAAM,CAAC,GAAG,IAAI,CAAC;YACf,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAC1C,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACpD,OAAO,UAAU,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1E,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,SAAiB,EAAU,EAAE;YACjD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;YACjC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC3B,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;YACpG,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YACtC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAEhC,MAAM,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;gBAC3D,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;oBAClC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;wBAClC,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC9D,MAAM,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;YACvC,MAAM,YAAY,GAAG,KAAK,GAAG,EAAE,IAAI,EAAE,CAAC;YAEtC,OAAO,GAAG,GAAG,GAAG,MAAM,IAAI,KAAK,IAAI,IAAI,KAAK,YAAY,IAAI,OAAO,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;QAC3F,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAY,EAAE;YACnC,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC;QACpD,CAAC,CAAC;KAkIH;IA1QC,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACnD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,qBAAqB,CAAC;YACrE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACtD,IAAI,IAAI,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YAChC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,gBAAgB;QACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IA6GD,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAChE,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,IAAI,GAAG,IAAI,CAAC,KAAK,0BAA0B,IAAI,CAAC,eAAe,EAAE,gBAAgB,IAAI,CAAC,WAAW,UAAU,CAAC;QAEhJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,4BAA4B,EAAE,IAAI,CAAC,UAAU,EAAE;gBACnF,4DACE,KAAK,EAAE;wBACL,gBAAgB,EAAE,IAAI;wBACtB,0BAA0B,EAAE,IAAI,CAAC,QAAQ;wBACzC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;qBAC1C,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,QAAQ,gBACD,aAAa;oBAEzB,4DAAK,KAAK,EAAC,yBAAyB;wBAClC,4DAAK,KAAK,EAAC,sBAAsB;4BAC/B,4DACE,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM;gCAElB,6DACE,CAAC,EAAC,yKAAyK,EAC3K,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,KAAK,GACb;gCACF,6DACE,CAAC,EAAC,yMAAyM,EAC3M,IAAI,EAAC,cAAc,GACnB,CACE;4BACN,4DAAK,KAAK,EAAC,sBAAsB;gCAC/B,2DAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAM;gCAClD,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,kBAAkB,IAAI,CACtD,0DAAG,KAAK,EAAC,yBAAyB;;oCAAuB,IAAI,CAAC,eAAe,EAAE,CAAK,CACrF,CACG,CACF;wBACN,0DAAG,KAAK,EAAC,yBAAyB,SAAO;wBACzC,4DAAK,KAAK,EAAC,wBAAwB;4BACjC,qEACE,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC5C,WAAW,EAAE,IAAI,CAAC,cAAc,gBACpB,IAAI,CAAC,WAAW,GACd,CACZ,CACF,CACF,CACF;YAEL,IAAI,CAAC,WAAW,IAAI,CACnB,4DAAK,KAAK,EAAC,WAAW,eAAW,QAAQ;gBACtC,IAAI,CAAC,YAAY,EAAE,IAAI,CACtB,0DAAG,KAAK,EAAC,mBAAmB;;oBACf,IAAI,CAAC,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;2BAC1C,CACL;gBACD,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM;wBAC7C,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc;4BACpG,6DAAM,CAAC,EAAC,qGAAqG,GAAG,CAC5G,CACF;oBACN,4DAAK,KAAK,EAAC,oBAAoB;wBAC7B,0DAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAK;wBACtD,0DAAG,KAAK,EAAC,iBAAiB;4BACvB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;4BAC1C,IAAI,CAAC,WAAW,CAAC,YAAY;gCAC5B,CAAC,CAAC,qBAAqB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE;gCACvE,CAAC,CAAC,EAAE,CACJ;wBACH,IAAI,CAAC,YAAY,EAAE,IAAI,CACtB,4DAAK,KAAK,EAAC,yBAAyB;4BAClC,4DACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,aAAa,mBACH,aAAa,mBACb,CAAC,mBACD,GAAG,gBACN,oBAAoB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG;gCAE5D,4DACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,aAAa,GAAG,EAAE,GAChC,CACH;4BACN,6DAAM,KAAK,EAAC,0BAA0B,iBAAa,MAAM;gCAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;oCAAS,CACzF,CACP,CACG;oBACN,+DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,gBAC1B,eAAe,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;wBAElD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM;4BACvH,6DAAM,CAAC,EAAC,uGAAuG,GAAG,CAC9G,CACC,CACL,CACF,CACP;YAED,8DACE,EAAE,EAAC,uBAAuB,EAC1B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,KAAK,EAAC,wBAAwB,EAC9B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,GAAG,IAAI,CAAC,WAAW,MAAM,IAAI,CAAC,KAAK,EAAE,EACjD,QAAQ,EAAE,CAAC,CAAC,GACZ,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method, Element } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\nconst HORIZONTAL_BREAKPOINT = 700;\n\n@Component({\n tag: 'xplor-drag-and-drop-input',\n styleUrl: 'xplor-drag-and-drop-input.scss',\n scoped: true,\n})\nexport class XplorDragAndDropInput {\n /**\n * Disable the file upload\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Accepted file types (e.g., 'image/png,.pdf')\n */\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /**\n * Instruction text displayed in the drop zone\n */\n @Prop() label: string = 'Drag and drop your files here';\n\n /**\n * Browse button label text\n */\n @Prop() browseLabel: string = 'Browse Files';\n\n /**\n * Accessible label for the drop zone area\n */\n @Prop() ariaLabel?: string;\n\n /**\n * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n */\n @Prop() progress: number = -1;\n\n @State() dragover: boolean = false;\n @State() currentFile: File | null = null;\n @State() horizontal: boolean = false;\n\n @Element() el!: HTMLElement;\n\n /**\n * Emitted when a file is selected via drop or click\n */\n @Event() fileSelect!: EventEmitter<File>;\n\n /**\n * Emitted when the current file is cleared\n */\n @Event() fileClear!: EventEmitter<void>;\n\n private fileInputEl?: HTMLInputElement;\n private resizeObserver?: ResizeObserver;\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.horizontal = entry.contentRect.width >= HORIZONTAL_BREAKPOINT;\n }\n });\n }\n\n componentDidLoad() {\n const zone = this.el.querySelector('.drag-drop-zone');\n if (zone && this.resizeObserver) {\n this.resizeObserver.observe(zone);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n /**\n * Clears the currently selected file\n */\n @Method()\n async clearCurrentFile() {\n this.currentFile = null;\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n this.fileClear.emit();\n }\n\n private onDrop = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n\n if (this.disabled) return;\n\n const file = e.dataTransfer?.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n };\n\n private onDragOver = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragLeave = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n };\n\n private onFileSelect = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n input.value = '';\n };\n\n private openFileDialog = () => {\n if (this.disabled) {\n return;\n }\n\n this.fileInputEl?.click();\n };\n\n private getAcceptsLabel = () => {\n const accepts = this.accepts?.trim();\n if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n return '*';\n }\n\n return accepts\n .split(',')\n .map((token) => token.trim())\n .filter((token) => token.length > 0)\n .map((token) => {\n if (token.startsWith('image/')) {\n return token.slice(6).toUpperCase();\n }\n\n if (token.startsWith('.')) {\n return token.slice(1).toUpperCase();\n }\n\n return token.toUpperCase();\n })\n .join('/');\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n\n private formatDate = (timestamp: number): string => {\n const date = new Date(timestamp);\n const day = date.getDate();\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n const month = months[date.getMonth()];\n const year = date.getFullYear();\n\n const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n : (day === 2 || day === 22) ? 'nd'\n : (day === 3 || day === 23) ? 'rd'\n : 'th';\n\n const hours = date.getHours();\n const minutes = date.getMinutes().toString().padStart(2, '0');\n const seconds = date.getSeconds().toString().padStart(2, '0');\n const ampm = hours >= 12 ? 'PM' : 'AM';\n const displayHours = hours % 12 || 12;\n\n return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n };\n\n private showProgress = (): boolean => {\n return this.progress >= 0 && this.progress <= 100;\n };\n\n render() {\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\n const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n return (\n <Host>\n <div class={{ 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal }}>\n <div\n class={{\n 'drag-drop-card': true,\n 'drag-drop-card--dragover': this.dragover,\n 'drag-drop-card--disabled': this.disabled,\n }}\n onDrop={this.onDrop}\n onDragOver={this.onDragOver}\n onDragEnter={this.onDragEnter}\n onDragLeave={this.onDragLeave}\n role=\"region\"\n aria-label={dropZoneLabel}\n >\n <div class=\"drag-drop-card__content\">\n <div class=\"drag-drop-card__body\">\n <svg\n class=\"drag-drop-card__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n opacity=\"0.3\"\n />\n <path\n 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\"\n fill=\"currentColor\"\n />\n </svg>\n <div class=\"drag-drop-card__text\">\n <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n {this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (\n <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n )}\n </div>\n </div>\n <p class=\"drag-drop-card__divider\">or</p>\n <div class=\"drag-drop-card__action\">\n <xplor-button\n text={this.browseLabel}\n type={this.disabled ? 'disabled' : 'primary'}\n clickAction={this.openFileDialog}\n aria-label={this.browseLabel}\n ></xplor-button>\n </div>\n </div>\n </div>\n </div>\n\n {this.currentFile && (\n <div class=\"file-info\" aria-live=\"polite\">\n {this.showProgress() && (\n <p class=\"file-info__status\">\n Uploading {this.progress === 100 ? '1' : '0'} / 1\n </p>\n )}\n <div class=\"file-info__card\">\n <div class=\"file-info__icon\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path 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\" />\n </svg>\n </div>\n <div class=\"file-info__details\">\n <p class=\"file-info__name\">{this.currentFile.name}</p>\n <p class=\"file-info__meta\">\n {this.formatFileSize(this.currentFile.size)}\n {this.currentFile.lastModified\n ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n : ''}\n </p>\n {this.showProgress() && (\n <div class=\"file-info__progress-row\">\n <div\n class=\"file-info__progress-bar\"\n role=\"progressbar\"\n aria-valuenow={progressValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n >\n <div\n class=\"file-info__progress-fill\"\n style={{ width: `${progressValue}%` }}\n ></div>\n </div>\n <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n </div>\n )}\n </div>\n <button\n class=\"file-info__remove\"\n onClick={() => this.clearCurrentFile()}\n aria-label={`Remove file ${this.currentFile.name}`}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path 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\" />\n </svg>\n </button>\n </div>\n </div>\n )}\n\n <input\n id=\"drag-drop-file-select\"\n type=\"file\"\n disabled={this.disabled}\n accept={this.accepts}\n class=\"drag-drop-input-hidden\"\n ref={(el) => (this.fileInputEl = el)}\n onChange={this.onFileSelect}\n aria-label={`${this.browseLabel} - ${this.label}`}\n tabindex={-1}\n />\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"xplor-drag-and-drop-input.js","sourceRoot":"","sources":["../../../src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method, Element } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\nconst HORIZONTAL_BREAKPOINT = 700;\n\n@Component({\n tag: 'xplor-drag-and-drop-input',\n styleUrl: 'xplor-drag-and-drop-input.scss',\n scoped: true,\n})\nexport class XplorDragAndDropInput {\n /**\n * Disable the file upload\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Accepted file types (e.g., 'image/png,.pdf')\n */\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /**\n * Instruction text displayed in the drop zone\n */\n @Prop() label: string = 'Drag and drop your files here';\n\n /**\n * Browse button label text\n */\n @Prop() browseLabel: string = 'Browse Files';\n\n /**\n * Accessible label for the drop zone area\n */\n @Prop() ariaLabel: string | null = null;\n\n /**\n * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n */\n @Prop() progress: number = -1;\n\n @State() dragover: boolean = false;\n @State() currentFile: File | null = null;\n @State() horizontal: boolean = false;\n\n @Element() el!: HTMLElement;\n\n /**\n * Emitted when a file is selected via drop or click\n */\n @Event() fileSelect!: EventEmitter<File>;\n\n /**\n * Emitted when the current file is cleared\n */\n @Event() fileClear!: EventEmitter<void>;\n\n private fileInputEl?: HTMLInputElement;\n private resizeObserver?: ResizeObserver;\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.horizontal = entry.contentRect.width >= HORIZONTAL_BREAKPOINT;\n }\n });\n }\n\n componentDidLoad() {\n const zone = this.el.querySelector('.drag-drop-zone');\n if (zone && this.resizeObserver) {\n this.resizeObserver.observe(zone);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n /**\n * Clears the currently selected file\n */\n @Method()\n async clearCurrentFile() {\n this.currentFile = null;\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n this.fileClear.emit();\n }\n\n private onDrop = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n\n if (this.disabled) return;\n\n const file = e.dataTransfer?.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n };\n\n private onDragOver = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragLeave = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n };\n\n private onFileSelect = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n input.value = '';\n };\n\n private openFileDialog = () => {\n if (this.disabled) {\n return;\n }\n\n this.fileInputEl?.click();\n };\n\n private getAcceptsLabel = () => {\n const accepts = this.accepts?.trim();\n if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n return '*';\n }\n\n return accepts\n .split(',')\n .map((token) => token.trim())\n .filter((token) => token.length > 0)\n .map((token) => {\n if (token.startsWith('image/')) {\n return token.slice(6).toUpperCase();\n }\n\n if (token.startsWith('.')) {\n return token.slice(1).toUpperCase();\n }\n\n return token.toUpperCase();\n })\n .join('/');\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n\n private formatDate = (timestamp: number): string => {\n const date = new Date(timestamp);\n const day = date.getDate();\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n const month = months[date.getMonth()];\n const year = date.getFullYear();\n\n const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n : (day === 2 || day === 22) ? 'nd'\n : (day === 3 || day === 23) ? 'rd'\n : 'th';\n\n const hours = date.getHours();\n const minutes = date.getMinutes().toString().padStart(2, '0');\n const seconds = date.getSeconds().toString().padStart(2, '0');\n const ampm = hours >= 12 ? 'PM' : 'AM';\n const displayHours = hours % 12 || 12;\n\n return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n };\n\n private showProgress = (): boolean => {\n return this.progress >= 0 && this.progress <= 100;\n };\n\n render() {\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\n const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n return (\n <Host>\n <div class={{ 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal }}>\n <div\n class={{\n 'drag-drop-card': true,\n 'drag-drop-card--dragover': this.dragover,\n 'drag-drop-card--disabled': this.disabled,\n }}\n onDrop={this.onDrop}\n onDragOver={this.onDragOver}\n onDragEnter={this.onDragEnter}\n onDragLeave={this.onDragLeave}\n role=\"region\"\n aria-label={dropZoneLabel}\n >\n <div class=\"drag-drop-card__content\">\n <div class=\"drag-drop-card__body\">\n <svg\n class=\"drag-drop-card__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n 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\"\n fill=\"currentColor\"\n opacity=\"0.3\"\n />\n <path\n 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\"\n fill=\"currentColor\"\n />\n </svg>\n <div class=\"drag-drop-card__text\">\n <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n {this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (\n <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n )}\n </div>\n </div>\n <p class=\"drag-drop-card__divider\">or</p>\n <div class=\"drag-drop-card__action\">\n <xplor-button\n text={this.browseLabel}\n type={this.disabled ? 'disabled' : 'primary'}\n clickAction={this.openFileDialog}\n aria-label={this.browseLabel}\n ></xplor-button>\n </div>\n </div>\n </div>\n </div>\n\n {this.currentFile && (\n <div class=\"file-info\" aria-live=\"polite\">\n {this.showProgress() && (\n <p class=\"file-info__status\">\n Uploading {this.progress === 100 ? '1' : '0'} / 1\n </p>\n )}\n <div class=\"file-info__card\">\n <div class=\"file-info__icon\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path 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\" />\n </svg>\n </div>\n <div class=\"file-info__details\">\n <p class=\"file-info__name\">{this.currentFile.name}</p>\n <p class=\"file-info__meta\">\n {this.formatFileSize(this.currentFile.size)}\n {this.currentFile.lastModified\n ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n : ''}\n </p>\n {this.showProgress() && (\n <div class=\"file-info__progress-row\">\n <div\n class=\"file-info__progress-bar\"\n role=\"progressbar\"\n aria-valuenow={progressValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n >\n <div\n class=\"file-info__progress-fill\"\n style={{ width: `${progressValue}%` }}\n ></div>\n </div>\n <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n </div>\n )}\n </div>\n <button\n class=\"file-info__remove\"\n onClick={() => this.clearCurrentFile()}\n aria-label={`Remove file ${this.currentFile.name}`}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path 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\" />\n </svg>\n </button>\n </div>\n </div>\n )}\n\n <input\n id=\"drag-drop-file-select\"\n type=\"file\"\n disabled={this.disabled}\n accept={this.accepts}\n class=\"drag-drop-input-hidden\"\n ref={(el) => (this.fileInputEl = el)}\n onChange={this.onFileSelect}\n aria-label={`${this.browseLabel} - ${this.label}`}\n tabindex={-1}\n />\n </Host>\n );\n }\n}\n"]}
|
|
@@ -8,10 +8,18 @@ const XplorButton = /*@__PURE__*/ proxyCustomElement(class XplorButton extends H
|
|
|
8
8
|
this.__registerHost();
|
|
9
9
|
this.type = 'secondary';
|
|
10
10
|
this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
|
|
11
|
+
/** Accessible label for icon-only buttons */
|
|
12
|
+
this.ariaLabel = null;
|
|
11
13
|
/** Whether the button is disabled */
|
|
12
14
|
this.disabled = false;
|
|
13
15
|
/** Whether the button stretches to full width of its container */
|
|
14
16
|
this.fullWidth = false;
|
|
17
|
+
/** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */
|
|
18
|
+
this.fullWidthAttr = false;
|
|
19
|
+
/**
|
|
20
|
+
* Icon position: 'start' | 'end' | null
|
|
21
|
+
*/
|
|
22
|
+
this.iconPosition = null;
|
|
15
23
|
/**
|
|
16
24
|
* Icon to display (defaults to plus sign)
|
|
17
25
|
*/
|
|
@@ -24,9 +32,10 @@ const XplorButton = /*@__PURE__*/ proxyCustomElement(class XplorButton extends H
|
|
|
24
32
|
return (h("span", { class: "button-icon" }, this.icon));
|
|
25
33
|
}
|
|
26
34
|
render() {
|
|
35
|
+
const isFullWidth = this.fullWidth || this.fullWidthAttr;
|
|
27
36
|
const isIconOnly = !this.text && this.iconPosition !== null;
|
|
28
37
|
const hasIcon = this.iconPosition !== null;
|
|
29
|
-
return (h(Host, { key: '
|
|
38
|
+
return (h(Host, { key: '7e1c935559697792d2309c397baa4c9614afc136', class: { 'x-button--full-width': isFullWidth } }, h("slot", { key: 'c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a' }, 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 && h("span", { key: '09bbac7ae367a56a5a23ff5d010ee453ddc09499', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
|
|
30
39
|
}
|
|
31
40
|
static get style() { return xplorButtonCss; }
|
|
32
41
|
}, [6, "xplor-button", {
|
|
@@ -39,6 +48,7 @@ const XplorButton = /*@__PURE__*/ proxyCustomElement(class XplorButton extends H
|
|
|
39
48
|
"ariaLabel": [1, "aria-label"],
|
|
40
49
|
"disabled": [4],
|
|
41
50
|
"fullWidth": [516, "full-width"],
|
|
51
|
+
"fullWidthAttr": [4, "fullwidth"],
|
|
42
52
|
"iconPosition": [1, "icon-position"],
|
|
43
53
|
"icon": [1],
|
|
44
54
|
"iconSvg": [1, "icon-svg"]
|
|
@@ -59,6 +69,6 @@ function defineCustomElement() {
|
|
|
59
69
|
defineCustomElement();
|
|
60
70
|
|
|
61
71
|
export { XplorButton as X, defineCustomElement as d };
|
|
62
|
-
//# sourceMappingURL=p-
|
|
72
|
+
//# sourceMappingURL=p-hygTyb6H.js.map
|
|
63
73
|
|
|
64
|
-
//# sourceMappingURL=p-
|
|
74
|
+
//# sourceMappingURL=p-hygTyb6H.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-hygTyb6H.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0owBAA0owB;;MCeppwB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AAbxB,IAAA,WAAA,GAAA;;;AAeU,QAAA,IAAI,CAAA,IAAA,GAAoF,WAAW;AACnG,QAAA,IAAA,CAAA,IAAI,GAA8B,IAAI,CAAC;;AAMvC,QAAA,IAAS,CAAA,SAAA,GAAkB,IAAI;;AAG/B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGR,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;;AAGjB,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAEhE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAA2B,IAAI;AAEnD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AAiD3B;IA9CS,UAAU,GAAA;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;AACvC,YAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,+BAA+B,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAAS;;AAGhF,QAAA,QACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACtB,EAAA,IAAI,CAAC,IAAI,CACL;;IAIX,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa;AACxD,QAAA,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI;AAC3D,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI;QAE1C,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,sBAAsB,EAAE,WAAW,EAAE,EAAA,EAClD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,kBACH,UAAU,EAAE,IAAI,EAChB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EACjB,sBAAsB,EAAE,WAAW,EACnC,qBAAqB,EAAE,UAAU,EACjC,qBAAqB,EAAE,OAAO,IAAI,CAAC,UAAU,EAC7C,sBAAsB,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,CAAC,UAAU,EACpE,oBAAoB,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,CAAC,UAAU,EAAA,GAC5D,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,EAEhD,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,EAAA,YAAA,EACzC,IAAI,CAAC,SAAS,EACX,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,EAC7D,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,IAAI,CAAQ,EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CACrD,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-button/xplor-button.scss?tag=xplor-button&encapsulation=scoped","src/components/xplor-button/xplor-button.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours-pg;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n display: block;\n}\n\n:host(.x-button--full-width) {\n width: 100%;\n}\n\n.x-button--full-width {\n width: 100%;\n}\n\n.x-button {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: relative;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border: 1px solid;\n border-radius: 1rem;\n cursor: pointer;\n display: block;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n font-size: 1rem;\n font-weight: 500;\n -webkit-box-pack: center;\n -webkit-justify-content: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-letter-spacing: 0.75px;\n -moz-letter-spacing: 0.75px;\n -ms-letter-spacing: 0.75px;\n padding: spacing.$spacing-12 spacing.$spacing-24;\n letter-spacing: 0.75px;\n overflow: hidden;\n position: relative;\n -webkit-transition:\n background-color 0.2s,\n border-color 0.2s,\n color 0.2s;\n transition:\n background-color 0.2s,\n border-color 0.2s,\n color 0.2s;\n\n // Icon Only Button (Circular)\n &.x-button--icon-only {\n width: 48px;\n height: 48px;\n padding: 0;\n border-radius: 50%;\n min-width: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n .button-icon {\n font-size: 20px;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &.button-icon--svg {\n svg {\n width: spacing.$spacing-16;\n height: spacing.$spacing-16;\n display: block;\n }\n }\n }\n }\n\n // Regular Button with Icon\n &.x-button--with-icon {\n .button-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n line-height: 1;\n }\n\n // SVG icon styles\n &.x-button--icon-start {\n .button-icon--svg {\n margin-right: spacing.$spacing-8 ;\n }\n }\n\n &.x-button--icon-end {\n .button-icon--svg {\n margin-left: spacing.$spacing-8 ;\n }\n }\n\n .button-icon--svg {\n\n\n svg {\n display: block;\n width: 14px;\n height: 14px;\n\n\n path {\n fill: currentColor;\n }\n }\n }\n\n .button-text {\n line-height: 1;\n }\n }\n\n // Icon positioning\n &.x-button--icon-start {\n flex-direction: row;\n }\n\n &.x-button--icon-end {\n flex-direction: row;\n }\n\n &.primary {\n background-color: colours-pg.$primary;\n border-color: colours-pg.$primary;\n color: white;\n\n &:hover {\n background-color: colours-pg.$primary-50;\n border-color: colours-pg.$primary-50;\n color: white;\n }\n }\n\n &.secondary {\n background-color: colours-pg.$secondary;\n border-color: colours-pg.$secondary;\n color: white;\n\n &:hover {\n background-color: colours-pg.$secondary-50;\n border-color: colours-pg.$secondary-50;\n color: white;\n ;\n }\n }\n\n &.ghost {\n background-color: #fff;\n border-color: colours-pg.$secondary;\n color: colours-pg.$secondary;\n\n &:hover {\n background-color: #DFF2F1;\n border-color: colours-pg.$secondary;\n color: colours-pg.$secondary;\n\n }\n\n &:active {\n background-color: #BEE6E4;\n border-color: colours-pg.$secondary;\n color: colours-pg.$secondary;\n\n }\n }\n\n &.minimal {\n background-color: transparent;\n border-color: transparent;\n color: colours-pg.$primary;\n }\n\n &.success {\n background-color: transparent;\n border-color: colours-pg.$success;\n color: colours-pg.$success;\n\n &:hover {\n background-color: colours-pg.$success-50;\n border-color: colours-pg.$success;\n color: colours-pg.$success;\n }\n\n &:active {\n background-color: colours-pg.$success-100;\n }\n }\n\n &.text {\n background-color: transparent;\n border-color: transparent;\n color: colours-pg.$secondary;\n\n &:hover {\n background-color: colours-pg.$secondary-50;\n }\n\n &:active {\n background-color: colours-pg.$secondary-100;\n }\n }\n\n &.disabled {\n background-color: #f6f6f6;\n border-color: #a0a0a0;\n color: #a0a0a0;\n }\n}\n\n.icon {\n background-color: #ffffff;\n bottom: 0px;\n left: 0px;\n opacity: 0;\n position: absolute;\n right: 0px;\n top: 0px;\n -webkit-transition: opacity 0.2s;\n transition: opacity 0.2s;\n}\n\n// Size variations for icon-only buttons\n.x-button--icon-only {\n &.small {\n width: 36px;\n height: 36px;\n padding: spacing.$spacing-4;\n\n .button-icon {\n font-size: 16px;\n }\n }\n\n &.button-icon--svg {\n padding: spacing.$spacing-4;\n\n svg {\n width: 16px;\n height: 16px;\n\n }\n }\n\n &.large {\n width: 56px;\n height: 56px;\n\n .button-icon {\n font-size: 24px;\n }\n }\n}\n\n// Ensure disabled state works with icon buttons\n.x-button.disabled {\n\n &.x-button--icon-only,\n &.x-button--with-icon {\n cursor: not-allowed;\n opacity: 0.6;\n }\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-button',\n styleUrl: 'xplor-button.scss',\n // we cant use multiple styleUrls because the mode property is not reactive only in stencilJS and once the component is rendered it wont change the css file\n // so we are using only one styleUrl and changing the styles based on the mode property in the class\n // styleUrls: {\n // default: 'xplor-button.scss',\n // dark: 'xplor-button-pg.scss',\n // pg: 'xplor-button-pg.scss',\n // office: 'xplor-button-office.scss',\n // },\n scoped: true,\n})\nexport class XplorButton {\n @Prop() text?: string;\n @Prop() type: 'minimal' | 'primary' | 'secondary' | 'ghost' | 'disabled' | 'success' | 'text' = 'secondary';\n @Prop() mode?: 'dark' | 'pg' | 'office' = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')\n @Prop() size?: string; // 'small', 'medium', 'large' (default:'medium')\n @Prop() styles?: string;\n @Prop() clickAction?: () => void;\n\n /** Accessible label for icon-only buttons */\n @Prop() ariaLabel: string | null = null;\n\n /** Whether the button is disabled */\n @Prop() disabled: boolean = false;\n\n /** Whether the button stretches to full width of its container */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n\n /** Backward compatibility for using fullWidth as an HTML attribute (serialized as fullwidth) */\n @Prop({ attribute: 'fullwidth' }) fullWidthAttr: boolean = false;\n\n /**\n * Icon position: 'start' | 'end' | null\n */\n @Prop() iconPosition: 'start' | 'end' | null = null;\n\n /**\n * Icon to display (defaults to plus sign)\n */\n @Prop() icon: string = '+';\n @Prop() iconSvg?: string;\n\n private renderIcon() {\n if (this.icon === 'svg' && this.iconSvg) {\n return (\n <span class=\"button-icon button-icon--svg \" innerHTML={this.iconSvg}></span>\n );\n }\n return (\n <span class=\"button-icon\">\n {this.icon}\n </span>\n );\n }\n\n render() {\n const isFullWidth = this.fullWidth || this.fullWidthAttr;\n const isIconOnly = !this.text && this.iconPosition !== null;\n const hasIcon = this.iconPosition !== null;\n\n return (\n <Host class={{ 'x-button--full-width': isFullWidth }}>\n <slot>\n <button\n role=\"button\"\n class={{\n 'x-button': true,\n [this.type]: true,\n 'x-button--full-width': isFullWidth,\n 'x-button--icon-only': isIconOnly,\n 'x-button--with-icon': hasIcon && !isIconOnly,\n 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly,\n 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly,\n ...(this.styles ? { [this.styles]: true } : {}),\n }}\n onClick={() => this.clickAction && this.clickAction()}\n aria-label={this.ariaLabel}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\n >\n {hasIcon && this.iconPosition === 'start' && this.renderIcon()}\n {this.text && <span class=\"button-text\">{this.text}</span>}\n {hasIcon && this.iconPosition === 'end' && this.renderIcon()}\n </button>\n </slot>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, a as Host } from './index.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-hygTyb6H.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-09-DxgmY.js';
|
|
4
4
|
|
|
5
5
|
const xplorBtnTooltipCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-btn-tooltip {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-btn-tooltip {\n width: 600px !important;\n }\n}\nh1.sc-xplor-btn-tooltip {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-btn-tooltip {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-btn-tooltip {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-btn-tooltip {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-btn-tooltip, ul.sc-xplor-btn-tooltip {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip, ul.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-tooltip {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-btn-tooltip {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-tooltip {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-btn-tooltip {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-tooltip .mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-btn-tooltip {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-btn-tooltip:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-btn-tooltip {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-tooltip-h {\n display: inline-block;\n}";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, a as Host } from './index.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-hygTyb6H.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-DvCXOu5j.js';
|
|
4
4
|
|
|
5
5
|
const xplorChatWidgetCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n /* html[data-theme='office'] {\n --color-primary: rgb(0, 119, 107);\n --color-secondary: rgb(128, 104, 186);\n --color-buttons: #89da59;\n --color-typography: #ff320e;\n }\n\n html {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgb(0, 119, 107);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgb(128, 104, 186);\n --color-tertiary: rgb(219, 59, 3);\n } */\n :root {\n --color-primary: rgb(0, 119, 107);\n --color-primary-50: rgba(1, 163, 157, 1);\n --color-secondary: rgb(128, 104, 186);\n --color-secondary-50: rgba(168, 127, 242, 1);\n --color-tertiary: rgb(219, 59, 3);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n /* Fallback */\n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n /* Fallback */\n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce {\n width: 600px !important;\n }\n}\nh1 {\n color: var(--color-primary);\n /* Header/H1 */\n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; /* 116.667% */\n}\n\nh2 {\n color: var(--grey-1100252525, #252525);\n /* Header/H2 Bold */\n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; /* 118.75% */\n letter-spacing: 0.25px;\n}\n\nh3 {\n color: var(--grey-1100252525, #252525);\n /* Header/H3 */\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; /* 133.333% */\n}\n\n.overline {\n color: var(--grey-1100252525, #252525);\n /* Overline/Regular */\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; /* 133.333% */\n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol,\nul {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol li,\nul li {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label {\n color: var(--Orange-900-Primary, #db3b03);\n /* Caption 1/Regular */\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 133.333% */\n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg {\n background-color: #fefcfb;\n}\n\n#spinnerLoader {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label {\n background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n display: block;\n}\n\n.container {\n display: flex;\n margin-top: 20px;\n}";
|