@aurigma/ui-framework/dist/imports/es8/dynamic.au-widget-gallery.eitc8cq1ck.js

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[29],{837:function(e,t){e.exports='<style>\n    :host {\n        display: block;\n        width: 100%;\n        --border-radius: 0;\n        --item-width: 110px;\n        --border-width: 4px;\n        --border-width-normal: 1px;\n    }\n\n    .message {\n        display: flex;\n    }\n\n    .message.hidden {\n        display: none;\n    }\n\n    au-option-heading {\n        padding: 0px 0 0 12px;\n    }\n\n    iron-selector {\n        display: inherit;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n        flex-direction: row;\n        -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        align-items: flex-start;\n        justify-content: flex-start;\n        height: 100%;\n        overflow: auto;\n    }\n\n    .item {\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n        flex-direction: column;\n        padding: 0 10px 0 10px;\n        margin-bottom: 12px;\n        outline: none;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        position: relative;\n        width: var(--item-width);\n    }\n\n    .item-content {\n        border-radius: var(--border-radius);\n        border: var(--border-width) solid var(--gallery-item-border-color);\n        object-fit: contain;\n        width: 100%;\n        height: 100%;\n    }\n\n    .item-description {\n        text-align: center;\n        overflow: hidden;\n        word-break: break-word;\n        -webkit-hyphens: manual;\n        -ms-hyphens: manual;\n        hyphens: manual;\n    }\n\n    .item.iron-selected .item-selection-frame .item-content {\n        /* border-color: var(--theme-primary-color);\n         */\n        border: var(--border-width) solid var(--theme-primary-color);\n        margin: 0;\n    }\n\n    .item-selection-frame {\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n        flex-direction: column;\n        -webkit-box-pack: center;\n        -ms-flex-pack: center;\n        justify-content: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        margin-bottom: calc(8px - var(--border-width));\n        width: 100%;\n    }\n\n    /* .album {\n        height: auto;\n    }\n\n    .portrait {\n        height: auto;\n        width: 100%;\n    } */\n\n    .item-caption {\n        @apply --au-caption-font;\n        display: inline-block;\n        text-align: center;\n        -o-text-overflow: ellipsis;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n        max-width: 100%;\n        font-size: 1em;\n        line-height: 1em;\n    }\n</style>\n<div id="emptyValuesMessage" class="message hidden">\n    [[emptyValuesText]]\n</div>\n<iron-selector name="gallery" class="gallery-image-container" attr-for-selected="name" selected="{{_selected}}">\n    <dom-repeat items="[[items]]">\n        <template>\n            <div tabindex="1" role="menuitemradio" name="{{item.name}}" class="item" title$="[[item.title]]">\n                <div class="item-selection-frame">\n                    \x3c!-- <au-responsive-image id="img" class="item-content" src="[[item.previewUrl]]"></au-responsive-image> --\x3e\n                    <img id="img" class="item-content" src="{{item.previewUrl}}" on-load="_onLoad">\n                </div>\n                <template is="dom-if" if="[[showTitle]]">\n                    <span class="item-title item-caption">[[item.title]]</span>\n                </template>\n            </div>\n        </template>\n    </dom-repeat>\n</iron-selector>'},900:function(e,t,i){"use strict";i.r(t),i.d(t,"AuWidgetGallery",(function(){return l})),i.d(t,"widget",(function(){return l}));var n=i(0),s=i(160),o=i(837),a=i(1),r=i(2);let l=class extends s.b{constructor(){super(...arguments),this._isRestoring=!1,this.description="",this.prompt="",this.items=[],this.showTitle=!0}_selectedChange(e,t){t.length>0&&!this._isRestoring&&(this.value=t.find((t=>t.name.toString()===e.toString())),this.emitChange({value:this.value}))}valueChanged(){this._onChange&&!this._isRestoring&&this._onChange(this.value)}get _(){return this.value}clearSelection(){this._selected="",this.value=null}_itemsChanged(e){setTimeout((()=>{a.a.isNotNullOrUndefined(e)&&e.every((e=>e.name.toString()!==this._selected.toString()))&&(this._selected=this.forceSelection&&this.items.length>0?this.items[0].name:"")}),0)}updateParams(e){this.showTitle=a.a.isNotNullOrUndefined(e.showTitle)?e.showTitle:this.showTitle,this.prompt=a.a.isNotNullOrUndefined(e.prompt)?e.prompt:this.prompt,this.description=a.a.isNotNullOrUndefined(e.description)?e.description:this.description,this.itemsExpression=e.itemsExpression||"response",this.forceSelection=!!e.forceSelection,this.applyEmptyValues=!!e.applyEmptyValues,this.emptyValuesText=e.emptyValuesText||this.localize("widgets.gallery.messages.emptyValuesWarning");const t=this.originWidget.group,i=t,n=()=>!(t._&&(!t._.chain||"function"!=typeof t._.chain));(!t||i&&(t.unifySelection&&n()||!t.unifySelection))&&(this.forceSelection=!!e.forceSelection,!this._selected&&e.preselected&&(this._selected=e.preselected)),i&&t.unifySelection&&!n()&&(this.forceSelection=!1),e.itemWidth&&this.updateStyles({"--item-width":e.itemWidth}),e.onChange&&(this._onChange=a.a.functionWrapperConstructor(e.onChange))}async updateParamsAsync(e){if(await super.updateParamsAsync(e),a.a.isNotNullOrUndefined(e.endpoint)){let t={method:e.method||"GET"};a.a.isNotNullOrUndefined(e.headers)&&(t.headers=new Headers(e.headers));let i=new Request(e.endpoint,t);return fetch(i).then((e=>{e.ok&&e.text().then((e=>{this.items=a.a.findDataInResponse(e,this.itemsExpression),this._manageEmptyValuesText()}))}))}a.a.isNotNullOrUndefined(e.items)&&(this.items=e.items,this._manageEmptyValuesText())}async exportWidgetData(e){return{value:this.value}}async restoreWidgetFromData(e,t){e&&e.value&&this._selected!==e.value.name&&(this._isRestoring=!0,this.setSelectedItem(e.value.name)),this._isRestoring=!1}setSelectedItem(e){if(!a.a.isNullOrUndefined(e)&&!a.a.isNullOrUndefined(this.items)&&0!==this.items.length)if("string"==typeof e){const t=this.items.find((t=>t.name===e));t&&(this._selected=t.name)}else if("number"==typeof e){const t=e;this.items.length>=t&&t>=0&&(this._selected=this.items[t].name)}}_onLoad(e){e.target&&(this.orientation=e.target.naturalWidth<e.target.naturalHeight?"portrait":"album",e.target.classList.remove("portrait","album"),e.target.classList.add(this.orientation))}_manageEmptyValuesText(){const e=this.querySelectorShadow("#emptyValuesMessage"),t=this.applyEmptyValues&&0===(this.items||[]).length;if(e)if(t)this.clearSelection(),e.classList.remove("hidden");else{const t=this.oldParams&&this.oldParams.items&&this.oldParams.items.length<1;this._&&this.items.length>0&&t&&(this._selected=this.items[0].name),e.classList.add("hidden")}}};Object(n.a)([Object(r.c)(),Object(n.b)("design:type",Object)],l.prototype,"params",void 0),Object(n.a)([Object(r.c)(),Object(n.b)("design:type",Boolean)],l.prototype,"applyEmptyValues",void 0),Object(n.a)([Object(r.c)(),Object(n.b)("design:type",String)],l.prototype,"emptyValuesText",void 0),Object(n.a)([Object(r.c)({notify:!0}),Object(n.b)("design:type",String)],l.prototype,"_selected",void 0),Object(n.a)([Object(r.b)("_selected, items"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[String,Array]),Object(n.b)("design:returntype",void 0)],l.prototype,"_selectedChange",null),Object(n.a)([Object(r.c)({notify:!0}),Object(n.b)("design:type",Object)],l.prototype,"value",void 0),Object(n.a)([Object(r.b)("value"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[]),Object(n.b)("design:returntype",void 0)],l.prototype,"valueChanged",null),Object(n.a)([Object(r.c)(),Object(n.b)("design:type",Object),Object(n.b)("design:paramtypes",[])],l.prototype,"_",null),Object(n.a)([Object(r.c)(),Object(n.b)("design:type",String)],l.prototype,"description",void 0),Object(n.a)([Object(r.c)(),Object(n.b)("design:type",String)],l.prototype,"prompt",void 0),Object(n.a)([Object(r.c)(),Object(n.b)("design:type",Array)],l.prototype,"items",void 0),Object(n.a)([Object(r.c)(),Object(n.b)("design:type",Boolean)],l.prototype,"showTitle",void 0),Object(n.a)([Object(r.b)("items"),Object(n.b)("design:type",Function),Object(n.b)("design:paramtypes",[Array]),Object(n.b)("design:returntype",void 0)],l.prototype,"_itemsChanged",null),Object(n.a)([Object(r.c)(),Object(n.b)("design:type",String)],l.prototype,"orientation",void 0),l=Object(n.a)([Object(r.a)("au-widget-gallery",o)],l)}}]);