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