@scandit/web-datacapture-barcode
Version:
Scandit Data Capture SDK for the Web
253 lines (249 loc) • 18.6 kB
JavaScript
import { h } from './chunk-Y6DC25EF.js';
import { a } from './chunk-YBD5JYCX.js';
import { ScanditHTMLElement, html, defineCustomElements } from '@scandit/web-datacapture-core/build/js/private/utils/index.js';
var C=class extends ScanditHTMLElement{constructor(){super(...arguments);this.icons={scanner:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(32,32)}"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.69858 5.22983C3.69858 4.55065 4.263 4.00006 4.95924 4.00006H10.055C10.7512 4.00006 11.3156 4.55065 11.3156 5.22983C11.3156 5.90902 10.7512 6.45961 10.055 6.45961H6.2199V10.2007C6.2199 10.8799 5.65549 11.4305 4.95924 11.4305C4.263 11.4305 3.69858 10.8799 3.69858 10.2007V5.22983ZM20.6844 5.22983C20.6844 4.55065 21.2488 4.00006 21.945 4.00006H27.0408C27.737 4.00006 28.3014 4.55065 28.3014 5.22983V10.2007C28.3014 10.8799 27.737 11.4305 27.0408 11.4305C26.3445 11.4305 25.7801 10.8799 25.7801 10.2007V6.45961H21.945C21.2488 6.45961 20.6844 5.90902 20.6844 5.22983ZM2 16.0001C2 15.3209 2.56442 14.7703 3.26066 14.7703H28.7393C29.4356 14.7703 30 15.3209 30 16.0001C30 16.6792 29.4356 17.2298 28.7393 17.2298H3.26066C2.56442 17.2298 2 16.6792 2 16.0001ZM4.95924 20.5696C5.65549 20.5696 6.2199 21.1202 6.2199 21.7994V25.5405H10.055C10.7512 25.5405 11.3156 26.0911 11.3156 26.7703C11.3156 27.4495 10.7512 28.0001 10.055 28.0001H4.95924C4.263 28.0001 3.69858 27.4495 3.69858 26.7703V21.7994C3.69858 21.1202 4.263 20.5696 4.95924 20.5696ZM27.0408 20.5696C27.737 20.5696 28.3014 21.1202 28.3014 21.7994V26.7703C28.3014 27.4495 27.737 28.0001 27.0408 28.0001H21.945C21.2488 28.0001 20.6844 27.4495 20.6844 26.7703C20.6844 26.0911 21.2488 25.5405 21.945 25.5405H25.7801V21.7994C25.7801 21.1202 26.3445 20.5696 27.0408 20.5696Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`,expand:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(14,14)}"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.46232 7.53028C5.75521 7.23738 6.23008 7.23738 6.52298 7.53028C6.81587 7.82317 6.81587 8.29804 6.52298 8.59094L2.86397 12.2499H5.5C5.91421 12.2499 6.25 12.5857 6.25 12.9999C6.25 13.4142 5.91421 13.7499 5.5 13.7499H1C0.948223 13.7499 0.897672 13.7447 0.848849 13.7347C0.507086 13.6648 0.25 13.3624 0.25 12.9999V8.49995C0.25 8.08573 0.585786 7.74995 1 7.74995C1.41421 7.74995 1.75 8.08573 1.75 8.49995V11.2426L5.46232 7.53028Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.84283 6.08313C8.54994 6.37602 8.07506 6.37602 7.78217 6.08313C7.48928 5.79023 7.48928 5.31536 7.78217 5.02246L11.0545 1.75017L8.5 1.75017C8.08579 1.75017 7.75 1.41439 7.75 1.00017C7.75 0.58596 8.08579 0.250174 8.5 0.250174L13 0.250174C13.4142 0.250174 13.75 0.58596 13.75 1.00017L13.75 5.50017C13.75 5.91439 13.4142 6.25017 13 6.25017C12.5858 6.25017 12.25 5.91439 12.25 5.50017L12.25 2.67596L8.84283 6.08313Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`,shrink:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(18,18)}"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style="${this[h]}"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.70694 17.7096C1.31642 18.1002 0.683255 18.1002 0.29273 17.7096C-0.0977935 17.3191 -0.0977935 16.6859 0.29273 16.2954L5.17662 11.4115L1.65674 11.4115C1.10445 11.4115 0.656738 10.9638 0.656738 10.4115C0.656738 9.85925 1.10445 9.41154 1.65674 9.41154L7.65674 9.41154C8.20902 9.41154 8.65674 9.85925 8.65674 10.4115C8.65674 10.4124 8.65674 10.4133 8.65674 10.4141C8.65674 10.415 8.65674 10.4159 8.65674 10.4167L8.65674 16.4167C8.65674 16.969 8.20902 17.4167 7.65674 17.4167C7.10445 17.4167 6.65674 16.969 6.65674 16.4167L6.65674 12.7598L1.70694 17.7096Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.2929 0.290513C16.6834 -0.100011 17.3166 -0.100012 17.7071 0.290513C18.0976 0.681037 18.0976 1.3142 17.7071 1.70473L13.3388 6.07299L16.75 6.07299C17.3023 6.07299 17.75 6.5207 17.75 7.07299C17.75 7.62527 17.3023 8.07299 16.75 8.07299H10.75C10.1977 8.07299 9.75 7.62527 9.75 7.07299V1.07299C9.75 0.520705 10.1977 0.0729893 10.75 0.0729893C11.3023 0.0729893 11.75 0.520705 11.75 1.07299V4.83341L16.2929 0.290513Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`,aimer:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(24,24)}"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 6.10352e-05C11.1716 6.10352e-05 10.5 0.671634 10.5 1.50006V6.50006C10.5 7.32849 11.1716 8.00006 12 8.00006C12.8284 8.00006 13.5 7.32849 13.5 6.50006V1.50006C13.5 0.671634 12.8284 6.10352e-05 12 6.10352e-05ZM16 11.5001C16 12.3285 16.6716 13.0001 17.5 13.0001H22.5C23.3284 13.0001 24 12.3285 24 11.5001C24 10.6716 23.3284 10.0001 22.5 10.0001H17.5C16.6716 10.0001 16 10.6716 16 11.5001ZM10.5 17.5001C10.5 16.6716 11.1716 16.0001 12 16.0001C12.8284 16.0001 13.5 16.6716 13.5 17.5001V22.5001C13.5 23.3285 12.8284 24.0001 12 24.0001C11.1716 24.0001 10.5 23.3285 10.5 22.5001V17.5001ZM0 11.5001C0 12.3285 0.671573 13.0001 1.5 13.0001H6.5C7.32843 13.0001 8 12.3285 8 11.5001C8 10.6716 7.32843 10.0001 6.5 10.0001H1.5C0.671573 10.0001 0 10.6716 0 11.5001Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`,torchOff:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(18,25)}"
viewBox="0 0 18 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99965 24.5001C5.85357 24.4995 5.70938 24.467 5.57725 24.4046C5.44513 24.3423 5.32828 24.2518 5.23496 24.1394C5.14164 24.027 5.07411 23.8955 5.03714 23.7541C5.00017 23.6128 4.99466 23.4651 5.02099 23.3214L6.80765 13.4987H2.00765C1.85299 13.5004 1.70007 13.4659 1.56102 13.3982C1.42197 13.3305 1.3006 13.2313 1.20654 13.1085C1.11248 12.9857 1.0483 12.8427 1.01911 12.6908C0.989907 12.5389 0.996486 12.3823 1.03832 12.2334L2.61432 6.45739L0.292987 4.13739C0.105391 3.9498 -2.7954e-09 3.69536 0 3.43006C2.79541e-09 3.16476 0.105391 2.91032 0.292987 2.72273C0.480584 2.53513 0.735019 2.42974 1.00032 2.42974C1.26562 2.42974 1.52006 2.53513 1.70765 2.72273L17.2637 18.2774C17.3619 18.3689 17.4407 18.4793 17.4954 18.602C17.55 18.7247 17.5794 18.8571 17.5818 18.9914C17.5841 19.1256 17.5594 19.259 17.5092 19.3835C17.4589 19.508 17.384 19.6212 17.289 19.7161C17.1941 19.8111 17.081 19.8859 16.9565 19.9362C16.8319 19.9865 16.6986 20.0112 16.5643 20.0089C16.43 20.0065 16.2976 19.9771 16.1749 19.9224C16.0523 19.8678 15.9419 19.789 15.8503 19.6907L12.1863 16.0281L6.83565 24.0534C6.74421 24.1913 6.61994 24.3043 6.47402 24.3822C6.3281 24.4602 6.1651 24.5007 5.99965 24.5001ZM14.4503 12.6334L3.82899 2.01206L4.04099 1.23873C4.0984 1.02666 4.22406 0.839402 4.39854 0.70589C4.57302 0.572378 4.78662 0.500042 5.00632 0.500061L11.9997 0.500061C12.1547 0.501379 12.3073 0.538102 12.446 0.607427C12.5846 0.676752 12.7056 0.776844 12.7997 0.900061C12.893 1.02388 12.9564 1.16772 12.9846 1.32021C13.0128 1.47271 13.0052 1.62968 12.9623 1.77873L11.333 7.50006H15.9997C16.1807 7.50033 16.3583 7.54963 16.5136 7.64271C16.6689 7.7358 16.7961 7.8692 16.8817 8.02876C16.9673 8.18832 17.0081 8.36808 16.9998 8.54895C16.9914 8.72983 16.9342 8.90506 16.8343 9.05606L14.453 12.6334H14.4503Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`,torchOn:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(16,25)}"
viewBox="0 0 16 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.0072 7.00265H10.3321L11.9687 1.27515C12.0113 1.12618 12.0187 0.969359 11.9903 0.817052C11.9619 0.664746 11.8985 0.521115 11.8051 0.397482C11.7118 0.273849 11.5909 0.173593 11.4522 0.104616C11.3135 0.0356387 11.1606 -0.000174023 11.0057 6.35801e-07H4.00306C3.78345 -9.74579e-05 3.5699 0.0720732 3.39538 0.205378C3.22085 0.338682 3.09504 0.525713 3.03736 0.737613L0.0362252 11.7378C-0.00491183 11.8864 -0.0111074 12.0426 0.0181227 12.1941C0.0473529 12.3456 0.111217 12.4882 0.204723 12.6109C0.298228 12.7336 0.418842 12.833 0.557137 12.9014C0.695432 12.9697 0.84766 13.0052 1.00192 13.0049H5.80374L4.01906 22.83C3.97674 23.0569 4.01421 23.2915 4.12511 23.494C4.23602 23.6964 4.41353 23.8543 4.62756 23.9408C4.84158 24.0273 5.07894 24.0372 5.29939 23.9687C5.51984 23.9002 5.70981 23.7575 5.83708 23.5649L15.8409 8.55924C15.9417 8.40847 15.9997 8.23313 16.0085 8.05196C16.0174 7.87079 15.9769 7.69062 15.8912 7.53073C15.8056 7.37083 15.6781 7.23723 15.5224 7.14421C15.3667 7.05119 15.1886 7.00226 15.0072 7.00265Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`,handle:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(14,6)}"
viewBox="0 0 14 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="1" cy="1" r="1" fill="${this.fill}" style="${this[h]}" />
<circle cx="5" cy="1" r="1" fill="${this.fill}" style="${this[h]}" />
<circle cx="9" cy="1" r="1" fill="${this.fill}" style="${this[h]}" />
<circle cx="13" cy="1" r="1" fill="${this.fill}" style="${this[h]}" />
<circle cx="1" cy="5" r="1" fill="${this.fill}" style="${this[h]}" />
<circle cx="5" cy="5" r="1" fill="${this.fill}" style="${this[h]}" />
<circle cx="9" cy="5" r="1" fill="${this.fill}" style="${this[h]}" />
<circle cx="13" cy="5" r="1" fill="${this.fill}" style="${this[h]}" />
</svg>
`,continuous:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(32,32)}"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.42499 3.93896C5.21585 3.93896 3.42499 5.72983 3.42499 7.93896V11.2723C3.42499 12.0087 4.02194 12.6056 4.75832 12.6056C5.4947 12.6056 6.09165 12.0087 6.09165 11.2723V7.93896C6.09165 7.20259 6.68861 6.60563 7.42499 6.60563H23.425C24.1614 6.60563 24.7583 7.20259 24.7583 7.93896V11.7876H22.8274C22.2742 11.7876 21.9617 12.4225 22.2991 12.8609L25.5634 17.1013C25.8303 17.448 26.3531 17.448 26.62 17.1013L29.8843 12.8609C30.2217 12.4225 29.9092 11.7876 29.356 11.7876H27.425V7.93896C27.425 5.72983 25.6341 3.93896 23.425 3.93896H7.42499Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
d="M23.5988 28.0001C25.808 28.0001 27.5988 26.2093 27.5988 24.0001V20.6668C27.5988 19.9304 27.0019 19.3335 26.2655 19.3335C25.5291 19.3335 24.9321 19.9304 24.9321 20.6668V24.0001C24.9321 24.7365 24.3352 25.3335 23.5988 25.3335L7.59882 25.3335C6.86244 25.3335 6.26548 24.7365 6.26548 24.0001L6.26548 19.3335H8.19646C8.74969 19.3335 9.06219 18.6985 8.72473 18.2601L5.46045 14.0197C5.19358 13.673 4.67078 13.673 4.40391 14.0197L1.13962 18.2601C0.802159 18.6985 1.11467 19.3335 1.66789 19.3335H3.59882L3.59882 24.0001C3.59882 26.2093 5.38968 28.0001 7.59882 28.0001L23.5988 28.0001Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
d="M12.6468 18.728C13.669 18.728 14.4697 18.2723 15.3942 17.133L15.4854 17.0288L15.5765 17.133C16.501 18.2723 17.3018 18.728 18.3239 18.728C19.9059 18.728 21.0843 17.5561 21.0843 16.0067V15.9936C21.0843 14.4442 19.9059 13.2723 18.3239 13.2723C17.3018 13.2723 16.501 13.7345 15.5765 14.8673L15.4854 14.978L15.3942 14.8673C14.4697 13.7345 13.669 13.2723 12.6468 13.2723C11.0648 13.2723 9.88641 14.4442 9.88641 15.9936V16.0067C9.88641 17.5561 11.0648 18.728 12.6468 18.728ZM12.738 17.3804C11.9242 17.3804 11.3447 16.8009 11.3447 16.0067V15.9936C11.3447 15.2059 11.9242 14.6199 12.738 14.6199C13.376 14.6199 13.8382 14.9585 14.5934 15.896L14.6781 16.0001L14.5934 16.1043C13.8382 17.0418 13.376 17.3804 12.738 17.3804ZM18.2328 17.3804C17.5947 17.3804 17.1325 17.0418 16.3773 16.1043L16.2927 16.0001L16.3773 15.896C17.1325 14.9585 17.5947 14.6199 18.2328 14.6199C19.0466 14.6199 19.626 15.2059 19.626 15.9936V16.0067C19.626 16.8009 19.0466 17.3804 18.2328 17.3804Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`,close:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(10,10)}"
viewBox="0 0 10 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 1L5 5L9 9"
stroke="${this.fill}"
stroke-width="2"
stroke-linecap="round"
style="${this[h]}"
/>
<path
d="M1 9L5 5L9 1"
stroke="${this.fill}"
stroke-width="2"
stroke-linecap="round"
style="${this[h]}"
/>
</svg>
`,find:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(22,22)}"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 2C3.34315 2 2 3.34315 2 5V8H4V5C4 4.44772 4.44772 4 5 4H8V2H5Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
d="M14 2V4H17C17.5523 4 18 4.44772 18 5V8H20V5C20 3.34315 18.6569 2 17 2H14Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
d="M8 18H5C4.44772 18 4 17.5523 4 17V14H2V17C2 18.6569 3.34315 20 5 20H8V18Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
d="M14 20H17C18.6569 20 20 18.6569 20 17V14H18V17C18 17.5523 17.5523 18 17 18H14V20Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.5215 14.5215C11.9137 14.8276 11.227 15 10.5 15C8.01472 15 6 12.9853 6 10.5C6 8.01472 8.01472 6 10.5 6C11.1815 6 11.8276 6.1515 12.4066 6.42266C13.9387 7.14034 15 8.69623 15 10.5C15 11.5315 14.653 12.4819 14.0693 13.2409L15.6426 14.8142C16.0332 15.2047 16.0332 15.8379 15.6426 16.2284C15.2521 16.6189 14.6189 16.6189 14.2284 16.2284L12.5215 14.5215ZM13 10.5C13 11.8807 11.8807 13 10.5 13C9.11929 13 8 11.8807 8 10.5C8 9.11929 9.11929 8 10.5 8C10.8823 8 11.2393 8.08445 11.5582 8.23382C12.414 8.63468 13 9.50094 13 10.5Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`,camera:()=>html`
<svg
width="${this.size}"
height="${this.heightForViewbox(25,25)}"
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.0397 10.8609C11.3009 10.8609 10.7019 11.4687 10.7019 12.2185C10.7019 12.9683 11.3009 13.5761 12.0397 13.5761C12.7785 13.5761 13.3775 12.9683 13.3775 12.2185C13.3775 11.4687 12.7785 10.8609 12.0397 10.8609ZM8.02637 12.2185C8.02637 9.9691 9.8232 8.14563 12.0397 8.14563C14.2562 8.14563 16.053 9.9691 16.053 12.2185C16.053 14.4678 14.2562 16.2913 12.0397 16.2913C9.8232 16.2913 8.02637 14.4678 8.02637 12.2185Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.0166 8.84792C18.4042 9.24131 19.0374 9.24596 19.4308 8.85832C19.8242 8.47068 19.8288 7.83754 19.4412 7.44415L18.7949 6.78827H20.0666C20.8054 6.78827 21.4044 7.39609 21.4044 8.14588V17.6492C21.4044 18.399 20.8054 19.0068 20.0666 19.0068H12.0399C11.3011 19.0068 10.7021 19.6146 10.7021 20.3644C10.7021 21.1142 11.3011 21.722 12.0399 21.722H20.0666C22.2831 21.722 24.08 19.8985 24.08 17.6492V8.14588C24.08 5.89651 22.2831 4.07304 20.0666 4.07304H18.7952L19.4412 3.41746C19.8288 3.02407 19.8242 2.39093 19.4308 2.00329C19.0374 1.61565 18.4042 1.6203 18.0166 2.01369L15.341 4.72892C14.9574 5.11822 14.9574 5.74339 15.341 6.13269L18.0166 8.84792Z"
fill="${this.fill}"
style="${this[h]}"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.02668 3.39404C8.02668 3.01914 8.32615 2.71523 8.69557 2.71523H14.7156C15.4544 2.71523 16.0534 2.1074 16.0534 1.35761C16.0534 0.607825 15.4544 0 14.7156 0H8.69557C6.84848 0 5.35112 1.51956 5.35112 3.39404C5.35112 3.76893 5.05165 4.07284 4.68223 4.07284H4.01334C1.79683 4.07284 0 5.89632 0 8.14569V17.649C0 19.8984 1.79683 21.7218 4.01334 21.7218H5.28453L4.63866 22.3773C4.25102 22.7707 4.25568 23.4038 4.64907 23.7915C5.04245 24.1791 5.6756 24.1744 6.06324 23.781L8.7388 21.0658C9.12242 20.6765 9.12242 20.0513 8.7388 19.662L6.06324 16.9468C5.6756 16.5534 5.04245 16.5488 4.64907 16.9364C4.25568 17.3241 4.25102 17.9572 4.63866 18.3506L5.28509 19.0066H4.01334C3.2745 19.0066 2.67556 18.3988 2.67556 17.649V8.14569C2.67556 7.3959 3.2745 6.78807 4.01334 6.78807H4.68223C6.52932 6.78807 8.02668 5.26851 8.02668 3.39404Z"
fill="${this.fill}"
style="${this[h]}"
/>
</svg>
`};}get icon(){var t;return (t=this.getAttribute("icon"))!=null?t:"scanner"}set icon(t){this.setAttribute("icon",t);}get fill(){var t;return (t=this.getAttribute("fill"))!=null?t:"black"}set fill(t){this.setAttribute("fill",t);}get size(){var t;return Number((t=this.getAttribute("size"))!=null?t:"32")}set size(t){this.setAttribute("size",t.toString());}get[h](){return this.getAttribute(h)}set[h](t){t==null?this.removeAttribute(h):this.setAttribute(h,t);}static create(){return defineCustomElements({[a]:this}),document.createElement(a)}render(){this.innerHTML=html`
${this.icons[this.icon]()}
<style>
${a} {
display: flex;
}
</style>
`;}aspectRatioForViewbox(t,l){return l/t}heightForViewbox(t,l){return this.size*this.aspectRatioForViewbox(t,l)}connectedCallback(){this.render();}attributeChangedCallback(t,l,h){h!==l&&this.render();}};C.observedAttributes=["icon","fill","size",h];
export { C as a };