@aurigma/ui-framework/dist/imports/es5/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,n){"use strict";n.r(t),n.d(t,"AuWidgetGallery",(function(){return l})),n.d(t,"widget",(function(){return l}));var i=n(0),o=n(160),s=n(837),r=n(1),a=n(2),l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t._isRestoring=!1,t.description="",t.prompt="",t.items=[],t.showTitle=!0,t}return Object(i.d)(t,e),t.prototype._selectedChange=function(e,t){t.length>0&&!this._isRestoring&&(this.value=t.find((function(t){return t.name.toString()===e.toString()})),this.emitChange({value:this.value}))},t.prototype.valueChanged=function(){this._onChange&&!this._isRestoring&&this._onChange(this.value)},Object.defineProperty(t.prototype,"_",{get:function(){return this.value},enumerable:!1,configurable:!0}),t.prototype.clearSelection=function(){this._selected="",this.value=null},t.prototype._itemsChanged=function(e){var t=this;setTimeout((function(){r.a.isNotNullOrUndefined(e)&&e.every((function(e){return e.name.toString()!==t._selected.toString()}))&&(t._selected=t.forceSelection&&t.items.length>0?t.items[0].name:"")}),0)},t.prototype.updateParams=function(e){this.showTitle=r.a.isNotNullOrUndefined(e.showTitle)?e.showTitle:this.showTitle,this.prompt=r.a.isNotNullOrUndefined(e.prompt)?e.prompt:this.prompt,this.description=r.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");var t=this.originWidget.group,n=t,i=function(){return!(t._&&(!t._.chain||"function"!=typeof t._.chain))};(!t||n&&(t.unifySelection&&i()||!t.unifySelection))&&(this.forceSelection=!!e.forceSelection,!this._selected&&e.preselected&&(this._selected=e.preselected)),n&&t.unifySelection&&!i()&&(this.forceSelection=!1),e.itemWidth&&this.updateStyles({"--item-width":e.itemWidth}),e.onChange&&(this._onChange=r.a.functionWrapperConstructor(e.onChange))},t.prototype.updateParamsAsync=function(t){return Object(i.b)(this,void 0,void 0,(function(){var n,o,s=this;return Object(i.e)(this,(function(i){switch(i.label){case 0:return[4,e.prototype.updateParamsAsync.call(this,t)];case 1:return i.sent(),r.a.isNotNullOrUndefined(t.endpoint)?(n={method:t.method||"GET"},r.a.isNotNullOrUndefined(t.headers)&&(n.headers=new Headers(t.headers)),o=new Request(t.endpoint,n),[2,fetch(o).then((function(e){e.ok&&e.text().then((function(e){s.items=r.a.findDataInResponse(e,s.itemsExpression),s._manageEmptyValuesText()}))}))]):(r.a.isNotNullOrUndefined(t.items)&&(this.items=t.items,this._manageEmptyValuesText()),[2])}}))}))},t.prototype.exportWidgetData=function(e){return Object(i.b)(this,void 0,void 0,(function(){return Object(i.e)(this,(function(e){return[2,{value:this.value}]}))}))},t.prototype.restoreWidgetFromData=function(e,t){return Object(i.b)(this,void 0,void 0,(function(){return Object(i.e)(this,(function(t){return e&&e.value&&this._selected!==e.value.name&&(this._isRestoring=!0,this.setSelectedItem(e.value.name)),this._isRestoring=!1,[2]}))}))},t.prototype.setSelectedItem=function(e){if(!r.a.isNullOrUndefined(e)&&!r.a.isNullOrUndefined(this.items)&&0!==this.items.length)if("string"==typeof e){var t=this.items.find((function(t){return t.name===e}));t&&(this._selected=t.name)}else if("number"==typeof e){var n=e;this.items.length>=n&&n>=0&&(this._selected=this.items[n].name)}},t.prototype._onLoad=function(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))},t.prototype._manageEmptyValuesText=function(){var e=this.querySelectorShadow("#emptyValuesMessage"),t=this.applyEmptyValues&&0===(this.items||[]).length;if(e)if(t)this.clearSelection(),e.classList.remove("hidden");else{var n=this.oldParams&&this.oldParams.items&&this.oldParams.items.length<1;this._&&this.items.length>0&&n&&(this._selected=this.items[0].name),e.classList.add("hidden")}},Object(i.c)([Object(a.c)(),Object(i.g)("design:type",Object)],t.prototype,"params",void 0),Object(i.c)([Object(a.c)(),Object(i.g)("design:type",Boolean)],t.prototype,"applyEmptyValues",void 0),Object(i.c)([Object(a.c)(),Object(i.g)("design:type",String)],t.prototype,"emptyValuesText",void 0),Object(i.c)([Object(a.c)({notify:!0}),Object(i.g)("design:type",String)],t.prototype,"_selected",void 0),Object(i.c)([Object(a.b)("_selected, items"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[String,Array]),Object(i.g)("design:returntype",void 0)],t.prototype,"_selectedChange",null),Object(i.c)([Object(a.c)({notify:!0}),Object(i.g)("design:type",Object)],t.prototype,"value",void 0),Object(i.c)([Object(a.b)("value"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[]),Object(i.g)("design:returntype",void 0)],t.prototype,"valueChanged",null),Object(i.c)([Object(a.c)(),Object(i.g)("design:type",Object),Object(i.g)("design:paramtypes",[])],t.prototype,"_",null),Object(i.c)([Object(a.c)(),Object(i.g)("design:type",String)],t.prototype,"description",void 0),Object(i.c)([Object(a.c)(),Object(i.g)("design:type",String)],t.prototype,"prompt",void 0),Object(i.c)([Object(a.c)(),Object(i.g)("design:type",Array)],t.prototype,"items",void 0),Object(i.c)([Object(a.c)(),Object(i.g)("design:type",Boolean)],t.prototype,"showTitle",void 0),Object(i.c)([Object(a.b)("items"),Object(i.g)("design:type",Function),Object(i.g)("design:paramtypes",[Array]),Object(i.g)("design:returntype",void 0)],t.prototype,"_itemsChanged",null),Object(i.c)([Object(a.c)(),Object(i.g)("design:type",String)],t.prototype,"orientation",void 0),Object(i.c)([Object(a.a)("au-widget-gallery",s)],t)}(o.b)}}]);