q2-tecton-elements 1.55.0 → 1.55.1
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/dist/bundle-report.json +7 -7
- package/dist/cjs/q2-badge_7.cjs.entry.js +13 -5
- package/dist/cjs/q2-badge_7.cjs.entry.js.map +1 -1
- package/dist/cjs/q2-file-picker.cjs.entry.js +1 -1
- package/dist/cjs/q2-file-picker.cjs.entry.js.map +1 -1
- package/dist/collection/components/q2-btn/q2-btn.css +56 -51
- package/dist/collection/components/q2-btn/q2-btn.js +12 -4
- package/dist/collection/components/q2-btn/q2-btn.js.map +1 -1
- package/dist/collection/components/q2-file-picker/q2-file-picker.css +1 -1
- package/dist/components/q2-btn2.js +13 -5
- package/dist/components/q2-btn2.js.map +1 -1
- package/dist/components/q2-file-picker.js +1 -1
- package/dist/components/q2-file-picker.js.map +1 -1
- package/dist/esm/q2-badge_7.entry.js +13 -5
- package/dist/esm/q2-badge_7.entry.js.map +1 -1
- package/dist/esm/q2-file-picker.entry.js +1 -1
- package/dist/esm/q2-file-picker.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-badge_7.entry.js +8 -7
- package/dist/q2-tecton-elements/q2-badge_7.entry.js.map +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.js +1 -1
- package/dist/q2-tecton-elements/q2-file-picker.entry.js.map +1 -1
- package/package.json +3 -3
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-e7e68b1e.js');
|
|
6
6
|
const index$1 = require('./index-905f4c87.js');
|
|
7
7
|
|
|
8
|
-
const q2FilePickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-
|
|
8
|
+
const q2FilePickerCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
|
|
9
9
|
const Q2FilePickerStyle0 = q2FilePickerCss;
|
|
10
10
|
|
|
11
11
|
const Q2FilePicker = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"q2-file-picker.entry.cjs.js","mappings":"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","names":["h","loc","Fragment","hasSlotContent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n margin-bottom: 0;\n margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-description-font-weight, 400);\n text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n align-items: center;\n background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n color: var(--tct-file-picker-drop-zone-color, #747474);\n display: flex;\n flex-direction: column;\n font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n height: var(--tct-file-picker-drop-zone-height, 150px);\n justify-content: center;\n padding: var(--tct-file-picker-drop-zone-padding, 20px);\n text-align: center;\n width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n animation-fill-mode: both;\n animation-play-state: running;\n animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n animation: shrinkToCenterFadeOut 0.1s ease-out;\n animation-play-state: running;\n animation-fill-mode: both;\n}\n\n.file-item {\n --tct-btn-icon-border-radius: 4px;\n --tct-btn-neutral-text-active-font-color: #{var-list(\n --tct-file-picker-item-close-btn-active-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n --tct-file-picker-item-close-btn-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n --tct-file-picker-item-close-btn-hover-focus-ring-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-icon-only-intent-padding: 0;\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n --tct-file-picker-item-border-color,\n --t-gray-8,\n #808080\n )};\n --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n text-align: left;\n}\n\n.file-item-loading {\n font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n max-height: var(--tct-file-picker-list-max-height, 190px);\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n display: flex;\n flex-direction: column;\n gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n display: flex;\n flex-direction: column;\n gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n --tct-icon-stroke-width: 2px;\n}\n\n.label {\n color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n // cursor: pointer;\n display: inline-block;\n font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-file-picker-label-font-weight, 600);\n text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n margin: 0;\n}\n\n.loading-message {\n color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n height: 30px;\n width: 30px;\n &:hover {\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n }\n}\n\n[slot='action'] {\n display: flex;\n align-items: center;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n invalidFiles: {\n file: File;\n status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n }[];\n validFiles: File[];\n};\n\n@Component({\n tag: 'q2-file-picker',\n styleUrl: 'q2-file-picker.scss',\n shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n // #region Own Properties\n\n browseButtonInput: HTMLElement;\n dropZone: HTMLElement;\n fileItemsToBeDeleted;\n queuedFiles: File[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n el: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n areFilesUploading: boolean = false;\n\n @State()\n displayedFiles: {\n file: File;\n status: FileStatus;\n toBeRemoved?: boolean;\n }[] = [];\n\n @State()\n isDropZoneHighlighted: boolean = false;\n\n @State()\n refreshCounter = 0;\n\n // #endregion\n // #region Public Property API\n\n /**\n * A description of the field. This is announced by screen readers when the field is focused.\n * @localizable\n */\n @Prop({ reflect: true })\n description: string;\n\n /**\n * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n * via JavaScript.\n */\n @Prop({ reflect: true })\n fileTypes: string[] | string = [];\n\n /**\n * The label for the field. This is announced by screen readers when the field is focused.\n * @localizable\n */\n @Prop({ reflect: true })\n label: string;\n\n /**\n * The maximum number of files that can be selected.\n */\n @Prop({ reflect: true })\n // maxFiles: number | string = Infinity;\n maxFiles: number = Infinity;\n\n /**\n * The maximum size (in bytes) of any file that can be selected.\n */\n @Prop({ reflect: true })\n maxFileSize: number = Infinity;\n\n /**\n * An array of objects representing the status of the files being uploaded.\n * Each object should have a `name` property (the file name) and a `status`\n * property (the status of the file) that equals either 'in-progress',\n * 'failed' or 'uploaded'.\n */\n @Prop({ reflect: true })\n status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n /**\n * Returns an array of File objects representing the files selected by the\n * user. If no files are selected, the value is an empty array.\n * @readonly\n */\n @Prop({ mutable: true })\n value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n /**\n * Determines if the file picker is a browse button or a drop zone with a\n * browse link.\n */\n @Prop({ reflect: true })\n variant: 'browse' | 'browse-drop' = 'browse';\n\n // #endregion\n // #region Events\n\n @Event()\n tctChange: EventEmitter<FilesObject>;\n\n // #endregion\n // #region Watchers\n\n @Watch('status')\n updateFileList(newValue: { name: string; status: FileStatus }[]) {\n newValue.forEach(statusItem => {\n const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n if (matchingQueuedFileIndex > -1) {\n const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n } else {\n const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n file => file.file.name === statusItem.name\n );\n if (matchingDisplayedFileIndex > -1) {\n this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n this.disableLoaderIfAllFilesUploaded();\n }\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get dropZoneClasses() {\n const classes = ['drop-zone'];\n if (this.isDropZoneHighlighted) {\n classes.push('drop-zone-highlighted');\n }\n\n return classes.join(' ');\n }\n\n get fileTypesArray() {\n return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n }\n\n get hasDescription() {\n return !!this.description || this.hasDescriptionSlotContent;\n }\n\n get hasDescriptionSlotContent() {\n return hasSlotContent(this.el, 'description');\n }\n\n get hasLabel() {\n return !!this.label || this.hasLabelSlotContent;\n }\n\n get hasLabelSlotContent() {\n return hasSlotContent(this.el, 'label');\n }\n\n buildFilesObject(filesToUpload: File[]): FilesObject {\n const invalidFiles = [];\n invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n this.displayedFiles = [...invalidFiles];\n\n if (filesToUpload.length === 0) {\n this.areFilesUploading = false;\n } else {\n this.queuedFiles = filesToUpload;\n }\n\n return { invalidFiles, validFiles: filesToUpload };\n }\n\n dimDropZone = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n };\n\n disableEvent(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n disableLoaderIfAllFilesUploaded() {\n if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n this.areFilesUploading = false;\n }\n }\n\n emitChange(filesObject: FilesObject) {\n this.areFilesUploading = filesObject.validFiles.length > 0;\n this.tctChange.emit(filesObject);\n }\n\n extractFilesOfInvalidTypes(files: File[]) {\n const invalidFiles = [];\n\n if (this.fileTypesArray.length === 0) return invalidFiles;\n\n files.forEach(file => {\n const fileExtension = file.name.split('.').pop().toLowerCase();\n if (!this.fileTypesArray.includes(fileExtension)) {\n invalidFiles.push({ file, status: 'invalid-type' });\n }\n });\n\n // Remove invalid files from the files array\n invalidFiles.forEach(invalidFile => {\n const index = files.indexOf(invalidFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return invalidFiles;\n }\n\n extractFilesOverMaxFilesLimit(files: File[]) {\n const filesOverMaxFilesLimit = [];\n\n if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n if (files.length > this.maxFiles) {\n const excessFiles = files.splice(this.maxFiles);\n excessFiles.forEach(file => {\n filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n });\n }\n\n return filesOverMaxFilesLimit;\n }\n\n extractFilesOverSizeLimit(files: File[]) {\n const filesOverSizeLimit = [];\n\n if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n files.forEach(file => {\n if (file.size > this.maxFileSize) {\n filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n }\n });\n\n // Remove files over size limit from the files array\n filesOverSizeLimit.forEach(overSizeFile => {\n const index = files.indexOf(overSizeFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return filesOverSizeLimit;\n }\n\n forceRerender() {\n this.refreshCounter += 1; // Triggers re-render\n }\n\n getAnimationendHandlerToRemoveFileItem(fileName: string) {\n return (e: AnimationEvent) => {\n if (e.animationName === 'shrinkToCenterFadeOut') {\n this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n }\n };\n }\n\n getClickHandlerToRemoveFileItem(fileName: string) {\n return () => {\n const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n if (fileToDelete) {\n fileToDelete.toBeRemoved = true;\n this.forceRerender();\n }\n };\n }\n\n getFileItemClasses(fileName: string) {\n const classes = ['file-item'];\n const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n if (matchingFile?.toBeRemoved) {\n classes.push('fade-out');\n } else {\n classes.push('fade-in');\n }\n return classes.join(' ');\n }\n\n getFileItemStatusMessage(status: FileStatus, size: number) {\n switch (status) {\n case 'invalid-type':\n return loc('tecton.element.filePicker.unsupportedFileType');\n case 'over-size-limit':\n return loc('tecton.element.filePicker.sizeExceedsLimit');\n case 'over-max-files-limit':\n return loc('tecton.element.filePicker.overMaxFilesLimit');\n case 'in-progress':\n return loc('tecton.element.filePicker.uploadingEllipsis');\n case 'failed':\n return loc('tecton.element.filePicker.uploadFailed');\n case 'uploaded':\n default:\n return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n }\n }\n\n grabDroppedFiles = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n const droppedFiles = Array.from(e.dataTransfer.files);\n const filesObject = this.buildFilesObject(droppedFiles);\n\n this.emitChange(filesObject);\n this.value = filesObject;\n };\n\n grabSelectedFiles = (e: Event) => {\n const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n const filesObject = this.buildFilesObject(selectedFiles);\n\n this.emitChange(filesObject);\n this.value = filesObject;\n };\n\n highlightDropZone = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = true;\n };\n\n launchFileBrowser() {\n this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n }\n\n // #endregion\n // #region Render Methods\n\n render = () => {\n return (\n <div class=\"file-picker\">\n {(this.hasLabel || this.hasDescription) && (\n <div class=\"heading\">\n {this.hasLabel && (\n <label\n class=\"label\"\n htmlFor=\"file-field\"\n test-id=\"label\"\n >\n {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n </label>\n )}\n {this.hasDescription && (\n <div\n class=\"description\"\n id=\"description\"\n test-id=\"description\"\n >\n {!!this.description ? (\n loc(this.description)\n ) : this.hasDescriptionSlotContent ? (\n <slot name=\"description\" />\n ) : (\n ''\n )}\n </div>\n )}\n </div>\n )}\n\n {(this.variant === 'browse-drop' && (\n <div\n class={this.dropZoneClasses}\n onDragEnter={this.disableEvent}\n onDragLeave={this.dimDropZone}\n onDragOver={this.highlightDropZone}\n onDrop={this.grabDroppedFiles}\n ref={el => (this.dropZone = el ?? this.dropZone)}\n test-id=\"drop-zone\"\n >\n {(this.areFilesUploading && (\n <Fragment>\n <q2-loading class=\"loading\"></q2-loading>\n <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n </Fragment>\n )) || (\n <Fragment>\n <q2-icon type=\"upload\"></q2-icon>\n <p class=\"drop-zone-text\">\n <q2-link\n label={loc('tecton.element.filePicker.browse')}\n onTctClick={() => this.launchFileBrowser()}\n variant=\"inline\"\n test-id=\"browse-link\"\n href=\"javascript:void(0)\"\n />\n {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n </p>\n </Fragment>\n )}\n </div>\n )) || (\n <div\n class=\"browse\"\n test-id=\"browse\"\n >\n <q2-btn\n disabled={this.areFilesUploading}\n intent=\"workflow-primary\"\n loading={this.areFilesUploading}\n onClick={() => this.launchFileBrowser()}\n size=\"medium\"\n test-id=\"browse-button\"\n >\n <q2-icon type=\"paperclip\"></q2-icon>\n <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n </q2-btn>\n </div>\n )}\n <input\n aria-describedby={(!!this.description && 'description') || undefined}\n class=\"sr\"\n id=\"file-field\"\n onChange={this.grabSelectedFiles}\n ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n type=\"file\"\n test-id=\"file-input\"\n multiple\n />\n <div class=\"file-list-container\">\n <q2-list class=\"file-list\">\n {this.displayedFiles.map(file => (\n <q2-item\n class={this.getFileItemClasses(file.file.name)}\n key={file.file.name}\n onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n >\n <div slot=\"bullet\">\n {file.status === 'invalid-type' ||\n file.status === 'over-size-limit' ||\n file.status === 'failed' ||\n file.status === 'over-max-files-limit' ? (\n <q2-icon\n class=\"icon-error\"\n type=\"error\"\n ></q2-icon>\n ) : file.status === 'in-progress' ? (\n <q2-loading class=\"file-item-loading\"></q2-loading>\n ) : (\n <q2-icon\n class=\"icon-success\"\n type=\"success\"\n ></q2-icon>\n )}\n </div>\n <div slot=\"header\">{file.file.name}</div>\n <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n <div slot=\"action\">\n <q2-btn\n class=\"dismiss-button\"\n intent=\"neutral-text\"\n onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"],"version":3}
|
|
1
|
+
{"file":"q2-file-picker.entry.cjs.js","mappings":"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","names":["h","loc","Fragment","hasSlotContent"],"sources":["src/components/q2-file-picker/q2-file-picker.scss?tag=q2-file-picker&encapsulation=shadow","src/components/q2-file-picker/q2-file-picker.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n@keyframes growFromCenterFadeIn {\n from {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n to {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n}\n\n@keyframes shrinkToCenterFadeOut {\n from {\n transform: scaleX(1) scaleY(1);\n opacity: 1;\n }\n to {\n transform: scaleX(0.75) scaleY(0.75);\n opacity: 0;\n }\n}\n\n:host {\n --comp-default-file-picker-margin: #{var-list(var-prefixer(file-picker-margin-top), --app-scale-5x, 25px) 0\n var-list(var-prefixer(file-picker-margin-bottom), --app-scale-5x, 25px)};\n display: block;\n margin: var-list(--tct-file-picker-margin, --comp-default-file-picker-margin);\n}\n\n.browse {\n text-align: left;\n}\n\n.drop-zone-text {\n color: var-list(--tct-file-picker-drop-zone-text-color, --t-gray-6, #4d4d4d);\n font-size: var-list(--tct-file-picker-drop-zone-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-browse-link-font-weight, 700);\n margin-bottom: 0;\n margin-top: var-list(--tct-file-picker-drop-zone-text-margin-top, --app-scale-2x, 10px);\n}\n\n.description {\n color: var-list(--tct-file-picker-description-text-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-description-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-description-font-weight, 400);\n text-align: var(--tct-file-picker-description-text-align, left);\n}\n\n.drop-zone {\n align-items: center;\n background-color: var-list(--tct-file-picker-drop-zone-background, --t-tertiary, #e8f5fc);\n border-radius: var-list(--tct-file-picker-drop-zone-border-radius, --app-border-radius-2, 6px);\n border-width: var(--tct-file-picker-drop-zone-border-width, 2px);\n border-style: var(--tct-file-picker-drop-zone-border-style, dashed);\n border-color: var-list(--tct-file-picker-drop-zone-border-color, --t-gray-8, #808080);\n color: var(--tct-file-picker-drop-zone-color, #747474);\n display: flex;\n flex-direction: column;\n font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);\n font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);\n height: var(--tct-file-picker-drop-zone-height, 150px);\n justify-content: center;\n padding: var(--tct-file-picker-drop-zone-padding, 20px);\n text-align: center;\n width: var(--tct-file-picker-drop-zone-width, 100%);\n}\n\n.drop-zone-highlighted {\n background-color: var-list(--tct-file-picker-drop-zone-highlighted-background, --tertiary-d-1, #bee1f6);\n border-color: var-list(--tct-file-picker-drop-zone-highlighted-border, --t-gray-8, #808080);\n}\n\n.fade-in {\n animation-fill-mode: both;\n animation-play-state: running;\n animation: growFromCenterFadeIn 0.2s ease-in;\n}\n\n.fade-out {\n animation: shrinkToCenterFadeOut 0.1s ease-out;\n animation-play-state: running;\n animation-fill-mode: both;\n}\n\n.file-item {\n --tct-btn-icon-border-radius: 4px;\n --tct-btn-neutral-text-active-font-color: #{var-list(\n --tct-file-picker-item-close-btn-active-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-neutral-text-focus-visible-outer-ring-color: #{var-list(\n --tct-file-picker-item-close-btn-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-neutral-text-font-color: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n --tct-btn-neutral-text-hover-outer-ring-color: #{var-list(\n --tct-file-picker-item-close-btn-hover-focus-ring-color,\n --t-gray-1,\n #0d0d0d\n )};\n --tct-btn-icon-padding: 0;\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-color, --t-gray-1, #0d0d0d)};\n --tct-item-body-font-size: #{var-list(--tct-file-picker-item-font-size, --app-font-size-small, 12px)};\n --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);\n --tct-item-border-radius: #{var-list(--tct-file-picker-item-border-radius, --app-border-radius-3, 12px)};\n --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid #{var-list(\n --tct-file-picker-item-border-color,\n --t-gray-8,\n #808080\n )};\n --tct-item-header-color: #{var-list(--tct-file-picker-item-name-color, --t-gray-1, #0d0d0d)};\n --tct-item-header-font-size: #{var-list(--tct-file-picker-item-name-font-size, --app-font-size-small, 12px)};\n --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);\n --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));\n text-align: left;\n}\n\n.file-item-loading {\n font-size: var-list(--tct-file-picker-file-item-loading-size, --app-scale-6x, 30px);\n // FIXME: This is a temporary fix to match the height of the closing icon which has 3.5px of padding I can't account for\n margin-bottom: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-6x, 30px) / 8.57);\n margin-left: calc(var-list(--tct-file-picker-file-item-loading-margin-bottom, --app-scale-1x, 5px) / 2);\n}\n\n.file-list {\n --tct-list-item-gap: #{var-list(--tct-file-picker-section-gap, --app-scale-3x, 15px)};\n}\n\n.file-list-container {\n max-height: var(--tct-file-picker-list-max-height, 190px);\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: #{var-list(--tct-file-picker-scrollbar-color, --t-a11y-gray-color, #949494)} transparent;\n}\n\n.file-picker {\n display: flex;\n flex-direction: column;\n gap: #{var-list(--tct-file-picker-file-item-gap, --app-scale-3x, 15px)};\n}\n\n.heading {\n display: flex;\n flex-direction: column;\n gap: #{var-list(--tct-file-picker-heading-gap, --app-scale-1x, 5px)};\n justify-content: space-between;\n}\n\n.icon-success,\n.icon-error {\n --tct-icon-size: #{var-list(--tct-file-picker-file-item-icon-size, --app-scale-6x, 30px)};\n --tct-icon-stroke-width: 2px;\n}\n\n.label {\n color: var-list(--tct-file-picker-label-color, --t-gray-1, #0d0d0d);\n display: inline-block;\n font-size: var-list(--tct-file-picker-label-font-size, --app-font-size, 14px);\n font-weight: var(--tct-file-picker-label-font-weight, 600);\n text-align: var(--tct-file-picker-label-text-align, left);\n}\n\n.loading {\n font-size: var-list(--tct-file-picker-loading-size, --app-scale-6x, 25px);\n}\n\n.loading-file {\n color: var-list(--tct-file-picker-loading-file-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-loading-file-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-loading-file-font-weight, 400);\n margin: 0;\n}\n\n.loading-message {\n color: var-list(--tct-file-picker-loading-message-color, --t-gray-1, #0d0d0d);\n font-size: var-list(--tct-file-picker-loading-message-font-size, --app-font-size-small, 12px);\n font-weight: var(--tct-file-picker-loading-message-font-weight, 700);\n margin-bottom: var-list(--tct-file-picker-loading-message-margin-bottom, --app-scale-2x, 10px);\n margin-top: var-list(--tct-file-picker-loading-message-margin-top, --app-scale-2x, 10px);\n}\n\n.dismiss-button {\n height: 30px;\n width: 30px;\n &:hover {\n --tct-icon-stroke-primary: #{var-list(--tct-file-picker-item-close-btn-hover-color, --t-gray-1, #0d0d0d)};\n }\n}\n\n[slot='action'] {\n display: flex;\n align-items: center;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\ntype FileStatus = 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\nexport type FilesObject = {\n invalidFiles: {\n file: File;\n status: 'invalid-type' | 'over-size-limit' | 'over-max-files-limit' | 'in-progress' | 'failed' | 'uploaded';\n }[];\n validFiles: File[];\n};\n\n@Component({\n tag: 'q2-file-picker',\n styleUrl: 'q2-file-picker.scss',\n shadow: true,\n})\nexport class Q2FilePicker implements ComponentInterface {\n // #region Own Properties\n\n browseButtonInput: HTMLElement;\n dropZone: HTMLElement;\n fileItemsToBeDeleted;\n queuedFiles: File[] = [];\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n el: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n areFilesUploading: boolean = false;\n\n @State()\n displayedFiles: {\n file: File;\n status: FileStatus;\n toBeRemoved?: boolean;\n }[] = [];\n\n @State()\n isDropZoneHighlighted: boolean = false;\n\n @State()\n refreshCounter = 0;\n\n // #endregion\n // #region Public Property API\n\n /**\n * A description of the field. This is announced by screen readers when the field is focused.\n * @localizable\n */\n @Prop({ reflect: true })\n description: string;\n\n /**\n * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or\n * 'jpg, png, pdf'). When using the attribute, provide a comma-separated\n * string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically\n * via JavaScript.\n */\n @Prop({ reflect: true })\n fileTypes: string[] | string = [];\n\n /**\n * The label for the field. This is announced by screen readers when the field is focused.\n * @localizable\n */\n @Prop({ reflect: true })\n label: string;\n\n /**\n * The maximum number of files that can be selected.\n */\n @Prop({ reflect: true })\n // maxFiles: number | string = Infinity;\n maxFiles: number = Infinity;\n\n /**\n * The maximum size (in bytes) of any file that can be selected.\n */\n @Prop({ reflect: true })\n maxFileSize: number = Infinity;\n\n /**\n * An array of objects representing the status of the files being uploaded.\n * Each object should have a `name` property (the file name) and a `status`\n * property (the status of the file) that equals either 'in-progress',\n * 'failed' or 'uploaded'.\n */\n @Prop({ reflect: true })\n status: { name: string; status: 'in-progress' | 'failed' | 'uploaded' }[] = [];\n\n /**\n * Returns an array of File objects representing the files selected by the\n * user. If no files are selected, the value is an empty array.\n * @readonly\n */\n @Prop({ mutable: true })\n value: FilesObject = { invalidFiles: [], validFiles: [] }; // Ensure FilesObject is exported or imported correctly\n\n /**\n * Determines if the file picker is a browse button or a drop zone with a\n * browse link.\n */\n @Prop({ reflect: true })\n variant: 'browse' | 'browse-drop' = 'browse';\n\n // #endregion\n // #region Events\n\n @Event()\n tctChange: EventEmitter<FilesObject>;\n\n // #endregion\n // #region Watchers\n\n @Watch('status')\n updateFileList(newValue: { name: string; status: FileStatus }[]) {\n newValue.forEach(statusItem => {\n const matchingQueuedFileIndex = this.queuedFiles.findIndex(file => file.name === statusItem.name);\n if (matchingQueuedFileIndex > -1) {\n const matchingFile = this.queuedFiles.splice(matchingQueuedFileIndex, 1)[0];\n this.displayedFiles = [{ file: matchingFile, status: statusItem.status }, ...this.displayedFiles];\n } else {\n const matchingDisplayedFileIndex = this.displayedFiles.findIndex(\n file => file.file.name === statusItem.name\n );\n if (matchingDisplayedFileIndex > -1) {\n this.displayedFiles[matchingDisplayedFileIndex].status = statusItem.status;\n this.disableLoaderIfAllFilesUploaded();\n }\n }\n });\n }\n\n // #endregion\n // #region Local Methods\n\n get dropZoneClasses() {\n const classes = ['drop-zone'];\n if (this.isDropZoneHighlighted) {\n classes.push('drop-zone-highlighted');\n }\n\n return classes.join(' ');\n }\n\n get fileTypesArray() {\n return Array.isArray(this.fileTypes) ? this.fileTypes : this.fileTypes.split(',').map(type => type.trim());\n }\n\n get hasDescription() {\n return !!this.description || this.hasDescriptionSlotContent;\n }\n\n get hasDescriptionSlotContent() {\n return hasSlotContent(this.el, 'description');\n }\n\n get hasLabel() {\n return !!this.label || this.hasLabelSlotContent;\n }\n\n get hasLabelSlotContent() {\n return hasSlotContent(this.el, 'label');\n }\n\n buildFilesObject(filesToUpload: File[]): FilesObject {\n const invalidFiles = [];\n invalidFiles.push(...this.extractFilesOfInvalidTypes(filesToUpload));\n invalidFiles.push(...this.extractFilesOverSizeLimit(filesToUpload));\n invalidFiles.push(...this.extractFilesOverMaxFilesLimit(filesToUpload));\n this.displayedFiles = [...invalidFiles];\n\n if (filesToUpload.length === 0) {\n this.areFilesUploading = false;\n } else {\n this.queuedFiles = filesToUpload;\n }\n\n return { invalidFiles, validFiles: filesToUpload };\n }\n\n dimDropZone = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n };\n\n disableEvent(event: Event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n disableLoaderIfAllFilesUploaded() {\n if (this.queuedFiles.length === 0 && !this.displayedFiles.some(file => file.status === 'in-progress')) {\n this.areFilesUploading = false;\n }\n }\n\n emitChange(filesObject: FilesObject) {\n this.areFilesUploading = filesObject.validFiles.length > 0;\n this.tctChange.emit(filesObject);\n }\n\n extractFilesOfInvalidTypes(files: File[]) {\n const invalidFiles = [];\n\n if (this.fileTypesArray.length === 0) return invalidFiles;\n\n files.forEach(file => {\n const fileExtension = file.name.split('.').pop().toLowerCase();\n if (!this.fileTypesArray.includes(fileExtension)) {\n invalidFiles.push({ file, status: 'invalid-type' });\n }\n });\n\n // Remove invalid files from the files array\n invalidFiles.forEach(invalidFile => {\n const index = files.indexOf(invalidFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return invalidFiles;\n }\n\n extractFilesOverMaxFilesLimit(files: File[]) {\n const filesOverMaxFilesLimit = [];\n\n if (this.maxFiles === Infinity) return filesOverMaxFilesLimit;\n\n if (files.length > this.maxFiles) {\n const excessFiles = files.splice(this.maxFiles);\n excessFiles.forEach(file => {\n filesOverMaxFilesLimit.push({ file, status: 'over-max-files-limit' });\n });\n }\n\n return filesOverMaxFilesLimit;\n }\n\n extractFilesOverSizeLimit(files: File[]) {\n const filesOverSizeLimit = [];\n\n if (this.maxFileSize === Infinity) return filesOverSizeLimit;\n\n files.forEach(file => {\n if (file.size > this.maxFileSize) {\n filesOverSizeLimit.push({ file, status: 'over-size-limit' });\n }\n });\n\n // Remove files over size limit from the files array\n filesOverSizeLimit.forEach(overSizeFile => {\n const index = files.indexOf(overSizeFile.file);\n if (index > -1) {\n files.splice(index, 1);\n }\n });\n\n return filesOverSizeLimit;\n }\n\n forceRerender() {\n this.refreshCounter += 1; // Triggers re-render\n }\n\n getAnimationendHandlerToRemoveFileItem(fileName: string) {\n return (e: AnimationEvent) => {\n if (e.animationName === 'shrinkToCenterFadeOut') {\n this.displayedFiles = this.displayedFiles.filter(file => file.file.name !== fileName);\n }\n };\n }\n\n getClickHandlerToRemoveFileItem(fileName: string) {\n return () => {\n const fileToDelete = this.displayedFiles.find(file => file.file.name === fileName);\n if (fileToDelete) {\n fileToDelete.toBeRemoved = true;\n this.forceRerender();\n }\n };\n }\n\n getFileItemClasses(fileName: string) {\n const classes = ['file-item'];\n const matchingFile = this.displayedFiles.find(file => file.file.name === fileName);\n if (matchingFile?.toBeRemoved) {\n classes.push('fade-out');\n } else {\n classes.push('fade-in');\n }\n return classes.join(' ');\n }\n\n getFileItemStatusMessage(status: FileStatus, size: number) {\n switch (status) {\n case 'invalid-type':\n return loc('tecton.element.filePicker.unsupportedFileType');\n case 'over-size-limit':\n return loc('tecton.element.filePicker.sizeExceedsLimit');\n case 'over-max-files-limit':\n return loc('tecton.element.filePicker.overMaxFilesLimit');\n case 'in-progress':\n return loc('tecton.element.filePicker.uploadingEllipsis');\n case 'failed':\n return loc('tecton.element.filePicker.uploadFailed');\n case 'uploaded':\n default:\n return loc('tecton.element.filePicker.fileSize', [(size / (1000 * 1000)).toFixed(2)]);\n }\n }\n\n grabDroppedFiles = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = false;\n const droppedFiles = Array.from(e.dataTransfer.files);\n const filesObject = this.buildFilesObject(droppedFiles);\n\n this.emitChange(filesObject);\n this.value = filesObject;\n };\n\n grabSelectedFiles = (e: Event) => {\n const selectedFiles = Array.from((e.target as HTMLInputElement).files);\n const filesObject = this.buildFilesObject(selectedFiles);\n\n this.emitChange(filesObject);\n this.value = filesObject;\n };\n\n highlightDropZone = (e: DragEvent) => {\n this.disableEvent(e);\n this.isDropZoneHighlighted = true;\n };\n\n launchFileBrowser() {\n this.browseButtonInput.dispatchEvent(new MouseEvent('click'));\n }\n\n // #endregion\n // #region Render Methods\n\n render = () => {\n return (\n <div class=\"file-picker\">\n {(this.hasLabel || this.hasDescription) && (\n <div class=\"heading\">\n {this.hasLabel && (\n <label\n class=\"label\"\n htmlFor=\"file-field\"\n test-id=\"label\"\n >\n {!!this.label ? loc(this.label) : this.hasLabelSlotContent ? <slot name=\"label\" /> : ''}\n </label>\n )}\n {this.hasDescription && (\n <div\n class=\"description\"\n id=\"description\"\n test-id=\"description\"\n >\n {!!this.description ? (\n loc(this.description)\n ) : this.hasDescriptionSlotContent ? (\n <slot name=\"description\" />\n ) : (\n ''\n )}\n </div>\n )}\n </div>\n )}\n\n {(this.variant === 'browse-drop' && (\n <div\n class={this.dropZoneClasses}\n onDragEnter={this.disableEvent}\n onDragLeave={this.dimDropZone}\n onDragOver={this.highlightDropZone}\n onDrop={this.grabDroppedFiles}\n ref={el => (this.dropZone = el ?? this.dropZone)}\n test-id=\"drop-zone\"\n >\n {(this.areFilesUploading && (\n <Fragment>\n <q2-loading class=\"loading\"></q2-loading>\n <p class=\"drop-zone-text\">{loc('tecton.element.filePicker.uploadingEllipsis')}</p>\n </Fragment>\n )) || (\n <Fragment>\n <q2-icon type=\"upload\"></q2-icon>\n <p class=\"drop-zone-text\">\n <q2-link\n label={loc('tecton.element.filePicker.browse')}\n onTctClick={() => this.launchFileBrowser()}\n variant=\"inline\"\n test-id=\"browse-link\"\n href=\"javascript:void(0)\"\n />\n {loc('tecton.element.filePicker.orDragFilesHere', [this.maxFiles])}\n </p>\n </Fragment>\n )}\n </div>\n )) || (\n <div\n class=\"browse\"\n test-id=\"browse\"\n >\n <q2-btn\n disabled={this.areFilesUploading}\n intent=\"workflow-primary\"\n loading={this.areFilesUploading}\n onClick={() => this.launchFileBrowser()}\n size=\"medium\"\n test-id=\"browse-button\"\n >\n <q2-icon type=\"paperclip\"></q2-icon>\n <span>{loc('tecton.element.filePicker.attachFiles', [this.maxFiles])}</span>\n </q2-btn>\n </div>\n )}\n <input\n aria-describedby={(!!this.description && 'description') || undefined}\n class=\"sr\"\n id=\"file-field\"\n onChange={this.grabSelectedFiles}\n ref={el => (this.browseButtonInput = el ?? this.browseButtonInput)}\n type=\"file\"\n test-id=\"file-input\"\n multiple\n />\n <div class=\"file-list-container\">\n <q2-list class=\"file-list\">\n {this.displayedFiles.map(file => (\n <q2-item\n class={this.getFileItemClasses(file.file.name)}\n key={file.file.name}\n onAnimationEnd={this.getAnimationendHandlerToRemoveFileItem(file.file.name)}\n >\n <div slot=\"bullet\">\n {file.status === 'invalid-type' ||\n file.status === 'over-size-limit' ||\n file.status === 'failed' ||\n file.status === 'over-max-files-limit' ? (\n <q2-icon\n class=\"icon-error\"\n type=\"error\"\n ></q2-icon>\n ) : file.status === 'in-progress' ? (\n <q2-loading class=\"file-item-loading\"></q2-loading>\n ) : (\n <q2-icon\n class=\"icon-success\"\n type=\"success\"\n ></q2-icon>\n )}\n </div>\n <div slot=\"header\">{file.file.name}</div>\n <div slot=\"body\">{this.getFileItemStatusMessage(file.status, file.file.size)}</div>\n <div slot=\"action\">\n <q2-btn\n class=\"dismiss-button\"\n intent=\"neutral-text\"\n onClick={this.getClickHandlerToRemoveFileItem(file.file.name)}\n >\n <q2-icon type=\"close\"></q2-icon>\n </q2-btn>\n </div>\n </q2-item>\n ))}\n </q2-list>\n </div>\n </div>\n );\n };\n\n // #endregion\n}\n"],"version":3}
|
|
@@ -132,6 +132,37 @@ button {
|
|
|
132
132
|
visibility: hidden;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
|
+
q2-loading {
|
|
136
|
+
--tct-loading-primary-color: currentcolor;
|
|
137
|
+
--tct-loading-secondary-color: currentcolor;
|
|
138
|
+
--tct-loading-spinner-size: 24px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.slot-container {
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
gap: var(--app-scale-1x, 5px);
|
|
146
|
+
pointer-events: none;
|
|
147
|
+
}
|
|
148
|
+
:host([loading]) .icon-right .slot-container {
|
|
149
|
+
flex-direction: row-reverse;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
:host([loading]) ::slotted(q2-icon) {
|
|
153
|
+
display: none;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
:host([loading]) button {
|
|
157
|
+
pointer-events: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
:host([block]) button,
|
|
161
|
+
:host([block]) button.icon-only {
|
|
162
|
+
display: block;
|
|
163
|
+
width: 100%;
|
|
164
|
+
}
|
|
165
|
+
|
|
135
166
|
:host {
|
|
136
167
|
display: inline-block;
|
|
137
168
|
}
|
|
@@ -160,6 +191,10 @@ button {
|
|
|
160
191
|
:host .btn-height-wrapper {
|
|
161
192
|
height: var(--comp-btn-min-height, 44px);
|
|
162
193
|
cursor: pointer;
|
|
194
|
+
display: flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
justify-content: center;
|
|
197
|
+
gap: var(--app-scale-1x, 5px);
|
|
163
198
|
}
|
|
164
199
|
:host .btn-height-wrapper:active {
|
|
165
200
|
box-shadow: none;
|
|
@@ -172,7 +207,6 @@ button {
|
|
|
172
207
|
width: 100%;
|
|
173
208
|
hyphens: auto;
|
|
174
209
|
border: var(--tct-btn-border);
|
|
175
|
-
border-radius: var(--tct-btn-border-radius);
|
|
176
210
|
background: transparent;
|
|
177
211
|
box-shadow: none;
|
|
178
212
|
border-radius: 0;
|
|
@@ -187,9 +221,18 @@ button:disabled {
|
|
|
187
221
|
opacity: var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
|
|
188
222
|
cursor: not-allowed;
|
|
189
223
|
}
|
|
190
|
-
|
|
224
|
+
button.has-color, button.has-intent {
|
|
225
|
+
font-size: var(--tct-btn-font-size, var(--t-btn-font-size, inherit));
|
|
226
|
+
border-radius: var(--tct-btn-border-radius, var(--comp-border-radius));
|
|
227
|
+
text-transform: var(--tct-btn-text-transform);
|
|
228
|
+
letter-spacing: var(--tct-btn-letter-spacing);
|
|
229
|
+
}
|
|
230
|
+
button.has-color:not(.has-size), button.has-intent:not(.has-size) {
|
|
191
231
|
padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
|
|
192
232
|
}
|
|
233
|
+
button:not(.has-size):not(.icon-only) ::slotted(q2-icon) {
|
|
234
|
+
--tct-icon-size: var(--tct-btn-icon-size, 18px);
|
|
235
|
+
}
|
|
193
236
|
:host([size="1"]) button {
|
|
194
237
|
padding: var(--tct-scale-1, var(--app-scale-1x, 5px));
|
|
195
238
|
}
|
|
@@ -205,15 +248,6 @@ button:disabled {
|
|
|
205
248
|
:host([size="4"]) button {
|
|
206
249
|
padding: var(--tct-scale-6x, var(--app-scale-6x, 30px));
|
|
207
250
|
}
|
|
208
|
-
:host([color]) button, :host([intent]) button {
|
|
209
|
-
font-size: var(--tct-btn-font-size, var(--t-btn-font-size, inherit));
|
|
210
|
-
border-radius: var(--tct-btn-border-radius, var(--comp-border-radius));
|
|
211
|
-
text-transform: var(--tct-btn-text-transform, var(--comp-text-transform));
|
|
212
|
-
letter-spacing: var(--tct-btn-letter-spacing, var(--comp-letter-spacing));
|
|
213
|
-
}
|
|
214
|
-
:host(:not([size])) button:not(.icon-only) ::slotted(q2-icon) {
|
|
215
|
-
--tct-icon-size: var(--tct-btn-icon-size, 18px);
|
|
216
|
-
}
|
|
217
251
|
:host([size=small]) button {
|
|
218
252
|
padding: var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));
|
|
219
253
|
font-size: var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px));
|
|
@@ -706,32 +740,34 @@ button.icon-only {
|
|
|
706
740
|
width: var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));
|
|
707
741
|
height: var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));
|
|
708
742
|
border-radius: var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));
|
|
743
|
+
padding: var(--tct-btn-icon-padding, 0px);
|
|
709
744
|
}
|
|
710
745
|
button.icon-only ::slotted(q2-icon) {
|
|
711
746
|
--tct-icon-size: unset;
|
|
712
747
|
}
|
|
713
|
-
|
|
714
|
-
padding: var(--tct-btn-icon-
|
|
748
|
+
button.icon-only.has-size {
|
|
749
|
+
padding: var(--tct-btn-icon-padding, 0px);
|
|
715
750
|
}
|
|
716
|
-
|
|
717
|
-
padding: var(--tct-btn-icon-
|
|
751
|
+
button.icon-only.has-intent {
|
|
752
|
+
padding: var(--tct-btn-icon-padding, 10px);
|
|
753
|
+
border-radius: var(--tct-btn-icon-border-radius, var(--comp-border-radius));
|
|
718
754
|
}
|
|
719
|
-
button
|
|
755
|
+
button:not(.has-color):not(.has-intent):hover, button:not(.has-color):not(.has-intent):focus, button.icon-only:hover, button.icon-only:focus {
|
|
720
756
|
background: var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
|
|
721
757
|
}
|
|
722
|
-
:
|
|
758
|
+
button:not(.has-intent).is-active.icon-only {
|
|
723
759
|
background-color: var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
|
|
724
760
|
}
|
|
725
|
-
:
|
|
761
|
+
button:not(.has-intent).icon-only:hover *, button:not(.has-intent).icon-only:focus *, button:not(.has-intent).is-active.icon-only * {
|
|
726
762
|
color: var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))));
|
|
727
763
|
}
|
|
728
|
-
:
|
|
764
|
+
button:not(.has-intent):not(.icon-only) {
|
|
729
765
|
height: var(--tct-btn-height, auto);
|
|
730
766
|
padding-inline: var(--tct-btn-padding-inline, 0);
|
|
731
767
|
font-weight: var(--tct-btn-font-weight);
|
|
732
768
|
border-radius: var(--tct-btn-border-radius, 0);
|
|
733
769
|
}
|
|
734
|
-
:
|
|
770
|
+
button:not(.has-intent):not(.icon-only):hover, button:not(.has-intent):not(.icon-only):focus {
|
|
735
771
|
background: var(--tct-btn-hover-background);
|
|
736
772
|
}
|
|
737
773
|
:host([badge]) button {
|
|
@@ -786,37 +822,6 @@ button.intent-coin:active:not([disabled]) {
|
|
|
786
822
|
box-shadow: none;
|
|
787
823
|
}
|
|
788
824
|
|
|
789
|
-
.slot-container {
|
|
790
|
-
display: flex;
|
|
791
|
-
align-items: center;
|
|
792
|
-
justify-content: center;
|
|
793
|
-
gap: var(--app-scale-1x, 5px);
|
|
794
|
-
pointer-events: none;
|
|
795
|
-
}
|
|
796
|
-
:host([loading]) .icon-right .slot-container {
|
|
797
|
-
flex-direction: row-reverse;
|
|
798
|
-
}
|
|
799
|
-
|
|
800
|
-
q2-loading {
|
|
801
|
-
--tct-loading-primary-color: currentcolor;
|
|
802
|
-
--tct-loading-secondary-color: currentcolor;
|
|
803
|
-
--tct-loading-spinner-size: 24px;
|
|
804
|
-
}
|
|
805
|
-
|
|
806
|
-
:host([loading]) ::slotted(q2-icon) {
|
|
807
|
-
display: none;
|
|
808
|
-
}
|
|
809
|
-
|
|
810
|
-
:host([loading]) button {
|
|
811
|
-
pointer-events: none;
|
|
812
|
-
}
|
|
813
|
-
|
|
814
|
-
:host([block]) button,
|
|
815
|
-
:host([block]) button.icon-only {
|
|
816
|
-
display: block;
|
|
817
|
-
width: 100%;
|
|
818
|
-
}
|
|
819
|
-
|
|
820
825
|
.coin-label {
|
|
821
826
|
color: var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));
|
|
822
827
|
font-size: var(--tct-btn-coin-label-font-size, var(--app-font-size, 14px));
|
|
@@ -114,12 +114,20 @@ export class Q2Btn {
|
|
|
114
114
|
}
|
|
115
115
|
get buttonClasses() {
|
|
116
116
|
const classes = [];
|
|
117
|
-
if (this.iconPosition)
|
|
117
|
+
if (this.iconPosition)
|
|
118
118
|
classes.push(`icon-${this.iconPosition}`);
|
|
119
|
-
|
|
120
|
-
if (this.intent === 'coin') {
|
|
119
|
+
if (this.intent === 'coin')
|
|
121
120
|
classes.push('intent-coin');
|
|
122
|
-
|
|
121
|
+
if (!!this.block)
|
|
122
|
+
classes.push('is-block');
|
|
123
|
+
if (!!this.color)
|
|
124
|
+
classes.push('has-color');
|
|
125
|
+
if (!!this.intent)
|
|
126
|
+
classes.push(`has-intent`);
|
|
127
|
+
if (!!this.size)
|
|
128
|
+
classes.push('has-size');
|
|
129
|
+
if (!!this.active)
|
|
130
|
+
classes.push('is-active');
|
|
123
131
|
return classes.join(' ');
|
|
124
132
|
}
|
|
125
133
|
get coinLabelClasses() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"q2-btn.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/q2-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n // #region Own Properties\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconPosition: 'left' | 'right' | 'only';\n\n // #endregion\n // #region Public Property API\n\n /**\n * @private\n * Role attribute for better semantic accessibility support\n */\n @Prop({ reflect: true })\n _role: string;\n\n /**\n * Displays the component in an active state.\n *\n * @info\n * Only intended for use with the `badge` property.\n * @deprecated\n */\n @Prop({ reflect: true })\n active: boolean;\n\n @Prop()\n ariaControls: string;\n\n @Prop()\n ariaExpanded: string;\n\n @Prop()\n ariaHasPopup: string;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n @Prop()\n ariaPressed: string;\n\n @Prop()\n ariaSelected: string;\n\n /**\n * Displays the component in a smaller, badge style.\n * @deprecated\n */\n @Prop({ reflect: true })\n badge: boolean;\n\n /** The component expands to fill the width of its parent element. */\n @Prop({ reflect: true })\n block: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true })\n color: string; // deprecated but need it to use utils/handleColor\n\n @Prop()\n description: string;\n\n /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n @Prop({ reflect: true })\n disabled: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true })\n fab: boolean;\n\n /**\n * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n */\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /**\n * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n */\n @Prop({ reflect: true, mutable: true })\n intent:\n | 'coin'\n | 'neutral-text'\n | 'neutral'\n | 'workflow-destroy'\n | 'workflow-escape'\n | 'workflow-primary'\n | 'workflow-secondary';\n\n /**\n * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n *\n * @localizable\n */\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n @Prop({ reflect: true })\n loading: boolean;\n\n /**\n * Defines the size of q2-btn, it renders as default size if not provided.\n */\n @Prop({ reflect: true })\n size: 'small' | 'medium' | 'large';\n\n @Prop()\n tabIndex: number;\n\n /** The default behavior of the button. */\n @Prop({ reflect: true })\n type: string = 'button';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n this.handleButtonSize();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.loading || this.disabled) {\n event.stopImmediatePropagation();\n }\n this.primaryBtn.focus();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonAttributes() {\n return {\n ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n 'true',\n 'false',\n 'menu',\n 'listbox',\n 'tree',\n 'grid',\n 'dialog',\n ]),\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled || false,\n type: this.type,\n tabindex: this.tabIndex || undefined,\n };\n }\n\n get buttonClasses() {\n const classes = [];\n if (this.iconPosition) {\n classes.push(`icon-${this.iconPosition}`);\n }\n if (this.intent === 'coin') {\n classes.push('intent-coin');\n }\n\n return classes.join(' ');\n }\n\n get coinLabelClasses() {\n const classes = ['coin-label'];\n if (this.disabled) {\n classes.push('disabled');\n }\n\n return classes.join(' ');\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\n };\n\n handleIcons = () => {\n // Only allow one icon in the button\n const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n if (acc) element.remove();\n else acc = element;\n return acc;\n }, null);\n\n const hasIcon = !!icon;\n const hasLoc = !!this.hostElement.querySelector('q2-loc');\n const hasText = !!this.hostElement.textContent.trim();\n const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n let iconPosition;\n if (hasIconOnly) iconPosition = 'only';\n else if (hasIconLeft) iconPosition = 'left';\n else if (hasIconRight) iconPosition = 'right';\n this.iconPosition = iconPosition;\n };\n\n handleSlotChange = () => {\n this.handleIcons();\n };\n\n // #endregion\n // #region Render Methods\n\n renderButton() {\n const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition || loading;\n const isLoadingSpinnerInline = !iconPosition || badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={this.buttonClasses}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n role={this._role || undefined}\n >\n <div class=\"slot-container\">\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {this.renderDefaultLabel()}\n {this.renderDefaultCoinSlot()}\n </div>\n </button>\n {this.renderCoinLabel()}\n {!!description && (\n <div\n id=\"hidden-description\"\n aria-hidden=\"true\"\n class=\"sr\"\n >\n {description}\n </div>\n )}\n </Fragment>\n );\n }\n\n renderCoinLabel() {\n if (this.intent !== 'coin' || this.hideLabel) return;\n return (\n <div\n id=\"coin-label\"\n class={this.coinLabelClasses}\n >\n {this.label ? (\n loc(this.label)\n ) : (\n <slot\n name=\"coin-label\"\n onSlotchange={this.handleSlotChange}\n />\n )}\n </div>\n );\n }\n\n renderDefaultCoinSlot() {\n if (this.intent !== 'coin') return;\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n renderDefaultLabel() {\n if (this.intent === 'coin') return;\n if (!this.hideLabel && this.label) return loc(this.label);\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n render() {\n return (this.size === 'small' && this.iconPosition !== 'only') || this.intent === 'coin' ? (\n // wrap only for small sized and coin intent\n <div\n class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={this.size === 'small' ? -1 : undefined}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n }\n\n // #endregion\n}\n"]}
|
|
1
|
+
{"version":3,"file":"q2-btn.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/q2-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\nexport class Q2Btn implements ComponentInterface {\n // #region Own Properties\n\n primaryBtn: HTMLButtonElement;\n primaryBtnWrapper: HTMLElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n @State()\n iconPosition: 'left' | 'right' | 'only';\n\n // #endregion\n // #region Public Property API\n\n /**\n * @private\n * Role attribute for better semantic accessibility support\n */\n @Prop({ reflect: true })\n _role: string;\n\n /**\n * Displays the component in an active state.\n *\n * @info\n * Only intended for use with the `badge` property.\n * @deprecated\n */\n @Prop({ reflect: true })\n active: boolean;\n\n @Prop()\n ariaControls: string;\n\n @Prop()\n ariaExpanded: string;\n\n @Prop()\n ariaHasPopup: string;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n @Prop()\n ariaPressed: string;\n\n @Prop()\n ariaSelected: string;\n\n /**\n * Displays the component in a smaller, badge style.\n * @deprecated\n */\n @Prop({ reflect: true })\n badge: boolean;\n\n /** The component expands to fill the width of its parent element. */\n @Prop({ reflect: true })\n block: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true })\n color: string; // deprecated but need it to use utils/handleColor\n\n @Prop()\n description: string;\n\n /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n @Prop({ reflect: true })\n disabled: boolean;\n\n /** @deprecated */\n @Prop({ reflect: true })\n fab: boolean;\n\n /**\n * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n */\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /**\n * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n */\n @Prop({ reflect: true, mutable: true })\n intent:\n | 'coin'\n | 'neutral-text'\n | 'neutral'\n | 'workflow-destroy'\n | 'workflow-escape'\n | 'workflow-primary'\n | 'workflow-secondary';\n\n /**\n * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n *\n * @localizable\n */\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n @Prop({ reflect: true })\n loading: boolean;\n\n /**\n * Defines the size of q2-btn, it renders as default size if not provided.\n */\n @Prop({ reflect: true })\n size: 'small' | 'medium' | 'large';\n\n @Prop()\n tabIndex: number;\n\n /** The default behavior of the button. */\n @Prop({ reflect: true })\n type: string = 'button';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.handleIcons();\n handleAriaLabel(this);\n handleColor(this);\n }\n\n componentDidLoad(): void {\n this.handleButtonSize();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.loading || this.disabled) {\n event.stopImmediatePropagation();\n }\n this.primaryBtn.focus();\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.primaryBtn.focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n // #endregion\n // #region Local Methods\n\n get buttonAttributes() {\n return {\n ariaExpanded: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n 'true',\n 'false',\n 'menu',\n 'listbox',\n 'tree',\n 'grid',\n 'dialog',\n ]),\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled || false,\n type: this.type,\n tabindex: this.tabIndex || undefined,\n };\n }\n\n get buttonClasses() {\n const classes = [];\n if (this.iconPosition) classes.push(`icon-${this.iconPosition}`);\n if (this.intent === 'coin') classes.push('intent-coin');\n if (!!this.block) classes.push('is-block');\n if (!!this.color) classes.push('has-color');\n if (!!this.intent) classes.push(`has-intent`);\n if (!!this.size) classes.push('has-size');\n if (!!this.active) classes.push('is-active');\n\n return classes.join(' ');\n }\n\n get coinLabelClasses() {\n const classes = ['coin-label'];\n if (this.disabled) {\n classes.push('disabled');\n }\n\n return classes.join(' ');\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\n };\n\n handleIcons = () => {\n // Only allow one icon in the button\n const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n if (acc) element.remove();\n else acc = element;\n return acc;\n }, null);\n\n const hasIcon = !!icon;\n const hasLoc = !!this.hostElement.querySelector('q2-loc');\n const hasText = !!this.hostElement.textContent.trim();\n const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n let iconPosition;\n if (hasIconOnly) iconPosition = 'only';\n else if (hasIconLeft) iconPosition = 'left';\n else if (hasIconRight) iconPosition = 'right';\n this.iconPosition = iconPosition;\n };\n\n handleSlotChange = () => {\n this.handleIcons();\n };\n\n // #endregion\n // #region Render Methods\n\n renderButton() {\n const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n this.buttonAttributes;\n const { iconPosition, loading, badge, label, hideLabel } = this;\n const renderLoadingSpinner = iconPosition || loading;\n const isLoadingSpinnerInline = !iconPosition || badge;\n return (\n <Fragment>\n <button\n ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-label={hideLabel && loc(label)}\n aria-selected={ariaSelected}\n aria-pressed={ariaPressed}\n disabled={disabled}\n type={type}\n tabindex={tabindex}\n test-id=\"q2BtnInnerButton\"\n class={this.buttonClasses}\n aria-describedby={!!description ? 'hidden-description' : undefined}\n aria-labelledby={this.intent === 'coin' && !hideLabel ? 'coin-label' : undefined}\n role={this._role || undefined}\n >\n <div class=\"slot-container\">\n {renderLoadingSpinner && (\n <q2-loading\n hidden={!loading}\n modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n />\n )}\n {this.renderDefaultLabel()}\n {this.renderDefaultCoinSlot()}\n </div>\n </button>\n {this.renderCoinLabel()}\n {!!description && (\n <div\n id=\"hidden-description\"\n aria-hidden=\"true\"\n class=\"sr\"\n >\n {description}\n </div>\n )}\n </Fragment>\n );\n }\n\n renderCoinLabel() {\n if (this.intent !== 'coin' || this.hideLabel) return;\n return (\n <div\n id=\"coin-label\"\n class={this.coinLabelClasses}\n >\n {this.label ? (\n loc(this.label)\n ) : (\n <slot\n name=\"coin-label\"\n onSlotchange={this.handleSlotChange}\n />\n )}\n </div>\n );\n }\n\n renderDefaultCoinSlot() {\n if (this.intent !== 'coin') return;\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n renderDefaultLabel() {\n if (this.intent === 'coin') return;\n if (!this.hideLabel && this.label) return loc(this.label);\n return <slot onSlotchange={this.handleSlotChange} />;\n }\n\n render() {\n return (this.size === 'small' && this.iconPosition !== 'only') || this.intent === 'coin' ? (\n // wrap only for small sized and coin intent\n <div\n class={this.size === 'small' ? 'btn-height-wrapper' : 'coin-wrapper'}\n ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n tabIndex={this.size === 'small' ? -1 : undefined}\n >\n {this.renderButton()}\n </div>\n ) : (\n this.renderButton()\n );\n }\n\n // #endregion\n}\n"]}
|
|
@@ -219,7 +219,7 @@ button {
|
|
|
219
219
|
--tct-btn-neutral-text-focus-visible-outer-ring-color: var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));
|
|
220
220
|
--tct-btn-neutral-text-font-color: var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));
|
|
221
221
|
--tct-btn-neutral-text-hover-outer-ring-color: var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));
|
|
222
|
-
--tct-btn-icon-
|
|
222
|
+
--tct-btn-icon-padding: 0;
|
|
223
223
|
--tct-icon-stroke-primary: var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));
|
|
224
224
|
--tct-item-body-font-size: var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));
|
|
225
225
|
--tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);
|