@aurigma/ui-framework/dist/imports/es8/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,i){i.r(t),i.d(t,"AuWidgetGallery",function(){return o}),i.d(t,"widget",function(){return o});var t=i(0),n=i(160),s=i(837),a=i(1),i=i(2);let o=class extends n.b{constructor(){super(...arguments),this._isRestoring=!1,this.description="",this.prompt="",this.items=[],this.showTitle=!0}_selectedChange(t,e){0<e.length&&!this._isRestoring&&(this.value=e.find(e=>e.name.toString()===t.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&&0<this.items.length?this.items[0].name:"")},0)}updateParams(e){this.showTitle=(a.a.isNotNullOrUndefined(e.showTitle)?e:this).showTitle,this.prompt=(a.a.isNotNullOrUndefined(e.prompt)?e:this).prompt,this.description=(a.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");let t=this.originWidget.group;var i=!t,n=t,s=()=>!(t._&&(!t._.chain||"function"!=typeof t._.chain));(i||n&&(t.unifySelection&&s()||!t.unifySelection))&&(this.forceSelection=!!e.forceSelection,!this._selected)&&e.preselected&&(this._selected=e.preselected),n&&t.unifySelection&&!s()&&(this.forceSelection=!1),e.itemWidth&&this.updateStyles({"--item-width":e.itemWidth}),e.onChange&&(this._onChange=a.a.functionWrapperConstructor(e.onChange))}async updateParamsAsync(e){var t;if(await super.updateParamsAsync(e),a.a.isNotNullOrUndefined(e.endpoint))return t={method:e.method||"GET"},a.a.isNotNullOrUndefined(e.headers)&&(t.headers=new Headers(e.headers)),t=new Request(e.endpoint,t),fetch(t).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(t){var e;a.a.isNullOrUndefined(t)||a.a.isNullOrUndefined(this.items)||0===this.items.length||("string"==typeof t?(e=this.items.find(e=>e.name===t))&&(this._selected=e.name):"number"==typeof t&&this.items.length>=t&&0<=t&&(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(){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(t.a)([Object(i.c)(),Object(t.b)("design:type",Object)],o.prototype,"params",void 0),Object(t.a)([Object(i.c)(),Object(t.b)("design:type",Boolean)],o.prototype,"applyEmptyValues",void 0),Object(t.a)([Object(i.c)(),Object(t.b)("design:type",String)],o.prototype,"emptyValuesText",void 0),Object(t.a)([Object(i.c)({notify:!0}),Object(t.b)("design:type",String)],o.prototype,"_selected",void 0),Object(t.a)([Object(i.b)("_selected, items"),Object(t.b)("design:type",Function),Object(t.b)("design:paramtypes",[String,Array]),Object(t.b)("design:returntype",void 0)],o.prototype,"_selectedChange",null),Object(t.a)([Object(i.c)({notify:!0}),Object(t.b)("design:type",Object)],o.prototype,"value",void 0),Object(t.a)([Object(i.b)("value"),Object(t.b)("design:type",Function),Object(t.b)("design:paramtypes",[]),Object(t.b)("design:returntype",void 0)],o.prototype,"valueChanged",null),Object(t.a)([Object(i.c)(),Object(t.b)("design:type",Object),Object(t.b)("design:paramtypes",[])],o.prototype,"_",null),Object(t.a)([Object(i.c)(),Object(t.b)("design:type",String)],o.prototype,"description",void 0),Object(t.a)([Object(i.c)(),Object(t.b)("design:type",String)],o.prototype,"prompt",void 0),Object(t.a)([Object(i.c)(),Object(t.b)("design:type",Array)],o.prototype,"items",void 0),Object(t.a)([Object(i.c)(),Object(t.b)("design:type",Boolean)],o.prototype,"showTitle",void 0),Object(t.a)([Object(i.b)("items"),Object(t.b)("design:type",Function),Object(t.b)("design:paramtypes",[Array]),Object(t.b)("design:returntype",void 0)],o.prototype,"_itemsChanged",null),Object(t.a)([Object(i.c)(),Object(t.b)("design:type",String)],o.prototype,"orientation",void 0),o=Object(t.a)([Object(i.a)("au-widget-gallery",s)],o)}}]);