@square/maker/components/Thumbnails/script.js

Maker Design System by Square

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../../components/Image"),require("../../components/Text"),require("../../utils/css-validator"));else if("function"==typeof define&&define.amd)define(["../../components/Image","../../components/Text","../../utils/css-validator"],t);else{var i="object"==typeof exports?t(require("../../components/Image"),require("../../components/Text"),require("../../utils/css-validator")):t(e["../../components/Image"],e["../../components/Text"],e["../../utils/css-validator"]);for(var n in i)("object"==typeof exports?exports:e)[n]=i[n]}}(this,(function(e,t,i){return(()=>{"use strict";var n={74:t=>{t.exports=e},86:e=>{e.exports=t},948:e=>{e.exports=i}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var i=r[e]={exports:{}};return n[e](i,i.exports,o),i.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{o.r(l),o.d(l,{MThumbnails:()=>s});var e=o(948),t=o.n(e),i=o(74),n=o(86);const r={components:{MImage:i.MImage,MText:n.MText},props:{thumbnails:{type:Array,required:!0},size:{type:String,default:"32px",validator:t()("width")},maxThumbnails:{type:Number,default:5,validator:e=>e>=0},overflowTextSize:{type:Number,default:0,validator:e=>e>=-2&&e<=7},thumbnailAlts:{type:[String,Array],default:()=>[]},thumbnailContainerAriaLabel:{type:String,default:"Thumbnail images"},overflowAriaLabel:{type:String,default:void 0}},computed:{visibleThumbnails(){return this.thumbnails.slice(0,this.maxThumbnails)},overflowImageCount(){return this.thumbnails.length-this.maxThumbnails},isClickable(){return!!this.$listeners["thumbnail:click"]},isOverflowClickable(){return!!this.$listeners["overflow:click"]},computedOverflowAriaLabel(){return this.overflowAriaLabel||"View ".concat(this.overflowImageCount," more images")},thumbnailStyles(){const e={"--size":this.size};return this.isClickable&&(e["--thumbnail-cursor"]="pointer"),this.isOverflowClickable&&(e["--overflow-cursor"]="pointer"),e}},methods:{getThumbnailAlt(e,t){return Array.isArray(this.thumbnailAlts)?this.thumbnailAlts[t]||"Thumbnail ".concat(t+1):"string"==typeof this.thumbnailAlts&&this.thumbnailAlts?this.thumbnailAlts:"Thumbnail ".concat(t+1)},getThumbnailClickLabel:(e,t)=>"View thumbnail ".concat(t+1),onThumbnailKeydown(e,t){this.isClickable&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.$emit("thumbnail:click",t)))},onOverflowKeydown(e){this.isOverflowClickable&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.$emit("overflow:click")))}}},a={Thumbnails:"📚19-10-2nNyj8",ThumbnailImage:"📚19-10-2Mh9qQ",ThumbnailOverflow:"📚19-10-2vw0MK"};const s=function(e,t,i,n,r,o,l,a){var s,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=i,u._compiled=!0),n&&(u.functional=!0),o&&(u._scopeId="data-v-"+o),l?(s=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(l)},u._ssrRegister=s):r&&(s=a?function(){r.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:r),s)if(u.functional){u._injectStyles=s;var c=u.render;u.render=function(e,t){return s.call(t),c(e,t)}}else{var m=u.beforeCreate;u.beforeCreate=m?[].concat(m,s):[s]}return{exports:e,options:u}}(r,(function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{class:e.$s.Thumbnails,style:e.thumbnailStyles,attrs:{role:"group","aria-label":e.thumbnailContainerAriaLabel}},[e._l(e.visibleThumbnails,(function(t,n){return i("m-image",{key:t,class:e.$s.ThumbnailImage,attrs:{src:t,alt:e.getThumbnailAlt(t,n),role:e.isClickable?"button":"img",tabindex:e.isClickable?0:void 0,"aria-label":e.isClickable?e.getThumbnailClickLabel(t,n):void 0},on:{click:function(i){return e.$emit("thumbnail:click",t)},keydown:function(i){return e.onThumbnailKeydown(i,t)}}})})),e._v(" "),e.overflowImageCount>0?i("div",{class:e.$s.ThumbnailOverflow,attrs:{role:"button",tabindex:e.isOverflowClickable?0:void 0,"aria-label":e.computedOverflowAriaLabel},on:{click:function(t){return e.$emit("overflow:click")},keydown:e.onOverflowKeydown}},[i("m-text",{attrs:{size:e.overflowTextSize,"aria-hidden":"true"}},[e._v("\n\t\t\t+"+e._s(e.overflowImageCount)+"\n\t\t")])],1):e._e()],2)}),[],!1,(function(e){this.$s=a.locals||a}),null,null).exports})(),l})()}));
//# sourceMappingURL=script.js.map