@scaleflex/widget-pixaforge 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 scaleflex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+# @scaleflex/widget-pixaforge
+
+[![Plugins][plugins-image]](#plugins)
+[![Website][filerobot-image]][sfx-url]
+[![Version][filerobot-version]][version-url]
+[![Scaleflex team][made-by-image]][sfx-url]
+[![License][license-image]][license-url]
+[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
+
+
+<div align='center'>
+<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
+</div>
+
+Import free images & icons from Pixaforge in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core) that has free gallery for both.
+
+## Usage
+
+### NPM
+
+```bash
+npm install --save @scaleflex/widget-pixaforge
+```
+### YARN
+
+```bash
+yarn add @scaleflex/widget-pixaforge
+```
+
+then
+
+```js
+import Pixaforge from '@scaleflex/widget-pixaforge'
+...
+...
+...
+scaleflexWidget.use(Pixaforge, propertiesObject)
+```
+
+### CDN
+
+The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.Pixaforge`
+
+```js
+const Pixaforge = window.ScaleflexWidget.Pixaforge
+...
+...
+...
+scaleflexWidget.use(Pixaforge, propertiesObject)
+```
+
+## Plugin's styles
+
+```js
+import '@scaleflex/widget-core/dist/style.css'
+import '@scaleflex/widget-pixaforge/dist/style.css'
+```
+
+or if you prefer the minified version
+
+```js
+import '@scaleflex/widget-core/dist/style.min.css'
+import '@scaleflex/widget-pixaforge/dist/style.min.css'
+```
+
+> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.
+
+## Properties
+
+### `title`
+
+<u>Type:</u> `string`
+
+<u>Default:</u> `'Pixaforge'`
+
+The title/label that would be shown & used for the plugin.
+
+### `companionHeaders`
+
+<u>Type:</u> `null` | `object`
+
+<u>Default:</u> `null`
+
+If you need to pass additional headers for in companion requests then pass them in this property(used in importing the images from pixaforge).
+
+### `locale: object`
+
+<u>Type:</u> `object`
+
+<u>Default:</u> locales from scaleflexWidget's backend then default locale file with all labels is under `lib/defaultLocale.js`.
+
+You can override some labels by specifying a translation object here, such as:
+
+```js
+{
+  strings: {
+    standardPortraits: 'Standard verticals' // overrides the default Standard portraits value to standard verticals
+  }
+}
+```
+
+### `noIconsGallery`
+
+<u>Type:</u> `boolean`
+
+<u>Default:</u> `false`
+
+If used the icons gallery option will be removed from the plugin and only images will be available.
+
+<!-- Variables -->
+
+[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-pixaforge
+[license-url]: https://opensource.org/licenses/MIT
+[sfx-url]: https://www.scaleflex.com/
+[version-url]: https://www.npmjs.com/package/@scaleflex/widget-pixaforge
+[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
+
+[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
+[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
+[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
+[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
+[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-pixaforge?label=Version&style=for-the-badge&logo=npm
+[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox

package/dist/style.css

@@ -0,0 +1,260 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+.filerobot-Pixaforge-MainView {
+  display: flex;
+  flex-direction: column;
+  height: 100%; }
+  .filerobot-Pixaforge-MainView img {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none; }
+
+.filerobot-Pixaforge-TopBar {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  background: #F8FAFB;
+  border-bottom: 1px solid #eaeaea; }
+  .filerobot-Pixaforge-TopBar > div:nth-child(2) {
+    min-width: calc(100% - 128px); }
+
+.filerobot-Pixaforge-TopBar-gallerySelect {
+  max-width: 128px;
+  margin-right: 8px; }
+
+.filerobot-Pixaforge-TopBar-galleryOption {
+  display: flex; }
+
+.filerobot-Pixaforge-Topbar-galleryIcon {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  color: #5D6D7E; }
+
+.filerobot-Pixaforge-overlay {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 4px;
+  right: 4px;
+  display: none;
+  z-index: 100; }
+  .filerobot-Pixaforge-overlay * {
+    color: #fff; }
+
+.filerobot-Pixaforge-Categories {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  padding: 8px 8px 4px;
+  overflow: auto; }
+
+.filerobot-Pixaforge-CategoryCard {
+  cursor: pointer;
+  padding: 4px 4px 8px;
+  width: 100%; }
+
+.filerobot-Pixaforge-CategoryCard-image {
+  width: 100%;
+  height: 120px; }
+  .filerobot-Pixaforge-CategoryCard-image img {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px; }
+
+.filerobot-Pixaforge-CategoryCard-label {
+  margin: 4px 0 2px;
+  font-size: 12px;
+  line-height: 14px; }
+
+.filerobot-Pixaforge-TagsAndFoundLabel {
+  margin: 12px 12px 4px; }
+
+.filerobot-Pixaforge-TagsAndFoundLabel-foundLabel {
+  display: inline-block; }
+
+.filerobot-Pixaforge-TagsAndFoundLabel-tags {
+  margin-left: 6px;
+  margin-right: 4px;
+  display: inline; }
+
+.filerobot-Pixaforge-TagItem {
+  margin: 2px;
+  cursor: pointer; }
+  .filerobot-Pixaforge-TagItem span {
+    border: 1px solid #92A6BC !important; }
+
+.filerobot-Pixaforge-TagsAndFoundLabel-showMoreLabel {
+  display: inline-flex;
+  margin-left: 8px;
+  margin-top: 2px; }
+
+@keyframes imgPlaceholderSkeleton {
+  0% {
+    background-position: -468px 0; }
+  100% {
+    background-position: 468px 0; } }
+
+.filerobot-Pixaforge-ImagesGallery {
+  display: flex;
+  flex-direction: column;
+  overflow: auto; }
+
+.filerobot-Pixaforge-ImagesGallery-imagesWrapper {
+  display: flex;
+  padding: 8px 8px 4px;
+  overflow: auto;
+  height: 100%;
+  width: 100%; }
+  .filerobot-Pixaforge-ImagesGallery-imagesWrapper .filerobot-c-empty {
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    font-size: 16px; }
+
+.filerobot-Pixaforge-PortraitsColumn {
+  margin: 0 4px;
+  flex-grow: 1; }
+
+.filerobot-Pixaforge-ImageCell {
+  margin-bottom: 8px;
+  position: relative;
+  cursor: pointer; }
+  .filerobot-Pixaforge-ImageCell.filerobot-Pixaforge-ImageCell--selected .filerobot-Pixaforge-overlay, .filerobot-Pixaforge-ImageCell:hover .filerobot-Pixaforge-overlay {
+    display: block; }
+  .filerobot-Pixaforge-ImageCell.filerobot-Pixaforge-ImageCell--selected img, .filerobot-Pixaforge-ImageCell:hover img {
+    filter: brightness(0.8); }
+  .filerobot-Pixaforge-ImageCell:hover .filerobot-Pixaforge-ImageCell-imageInfo {
+    display: block; }
+
+.filerobot-Pixaforge-ImageCell-imageWrapper {
+  width: 100%;
+  height: 100%;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: imgPlaceholderSkeleton;
+  animation-timing-function: linear;
+  background: #F8FAFB;
+  background-image: linear-gradient(to right, #F8FAFB 0%, #f1f3f6 30%, #F8FAFB 90%, #F8FAFB 100%);
+  background-repeat: no-repeat; }
+  .filerobot-Pixaforge-ImageCell-imageWrapper img {
+    border-radius: 2px;
+    max-width: 100%;
+    filter: drop-shadow(0px 1px 2px rgba(78, 77, 77, 0.15)); }
+
+.filerobot-Pixaforge-ImageCell-imageInfo {
+  display: none; }
+
+.filerobot-Pixaforge-ImageCell-authorAndTitle {
+  text-align: right;
+  position: absolute;
+  width: 80%;
+  top: 0;
+  right: 0; }
+  .filerobot-Pixaforge-ImageCell-authorAndTitle div {
+    font-size: 10px;
+    line-height: 12px; }
+
+.filerobot-Pixaforge-ImageCell-author {
+  font-weight: 700;
+  margin-bottom: 4px; }
+
+.filerobot-Pixaforge-ImageCell-imageMeta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  width: 100%;
+  bottom: 0; }
+  .filerobot-Pixaforge-ImageCell-imageMeta span {
+    font-size: 11px;
+    line-height: 12px;
+    text-align: center; }
+
+.filerobot-Pixaforge-LandscapesContainer {
+  display: flex;
+  flex-wrap: wrap; }
+
+.filerobot-Pixaforge-LandscapesContainer .filerobot-Pixaforge-ImageCell {
+  margin: 4px;
+  flex-grow: 1;
+  height: 160px;
+  max-height: 160px; }
+  .filerobot-Pixaforge-LandscapesContainer .filerobot-Pixaforge-ImageCell img {
+    max-height: 100%;
+    width: 100%;
+    -o-object-fit: cover;
+       object-fit: cover; }
+
+.filerobot-Pixaforge-IconsGallery {
+  display: flex;
+  flex-direction: column;
+  overflow: auto; }
+
+.filerobot-Pixaforge-IconsGallery-icons {
+  display: flex;
+  padding: 8px;
+  overflow: auto;
+  flex-wrap: wrap; }
+
+.filerobot-Pixaforge-SingleIcon {
+  cursor: pointer;
+  position: relative;
+  width: 106px;
+  height: 106px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #F8FAFB;
+  margin: 4px; }
+  .filerobot-Pixaforge-SingleIcon:hover {
+    background-color: #EFF3F6; }
+    .filerobot-Pixaforge-SingleIcon:hover .filerobot-Pixaforge-overlay {
+      display: block; }
+
+.filerobot-Pixaforge-SingleIcon--selected {
+  background-color: #EFF3F6; }
+  .filerobot-Pixaforge-SingleIcon--selected .filerobot-Pixaforge-overlay {
+    display: block; }
+
+.filerobot-Pixaforge-SingleIcon-icon {
+  width: 50px;
+  height: 50px;
+  max-width: 50px;
+  max-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5D6D7E; }
+  .filerobot-Pixaforge-SingleIcon-icon svg {
+    max-width: 100%;
+    max-height: 100%; }
+
+.filerobot-Pixaforge-CustomizeIcons {
+  padding: 12px 8px 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto; }
+
+.filerobot-Pixaforge-ColorCustomization {
+  margin: 0 4px; }
+
+.filerobot-Pixaforge-CustomizedIcons-title {
+  margin: 0 0 12px 4px; }
+  .filerobot-Pixaforge-CustomizedIcons-title svg {
+    margin-left: 6px;
+    width: 12px;
+    height: 12px; }
+
+.filerobot-Pixaforge-CustomizeIcons-iconsWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: auto;
+  margin: 12px 0; }
+
+.filerobot-Pixaforge-ColorCustomization-rgbField {
+  max-width: 80px;
+  margin-right: 4px; }
+
+.filerobot-Pixaforge-ColorCustomization-removeButton {
+  display: inline-flex;
+  margin-left: 8px; }

package/dist/style.min.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");.filerobot-Pixaforge-MainView{display:flex;flex-direction:column;height:100%}.filerobot-Pixaforge-MainView img{-webkit-user-select:none;-moz-user-select:none;user-select:none}.filerobot-Pixaforge-TopBar{align-items:center;background:#f8fafb;border-bottom:1px solid #eaeaea;display:flex;padding:12px}.filerobot-Pixaforge-TopBar>div:nth-child(2){min-width:calc(100% - 128px)}.filerobot-Pixaforge-TopBar-gallerySelect{margin-right:8px;max-width:128px}.filerobot-Pixaforge-TopBar-galleryOption{display:flex}.filerobot-Pixaforge-Topbar-galleryIcon{color:#5d6d7e;height:16px;margin-right:8px;width:16px}.filerobot-Pixaforge-overlay{bottom:4px;display:none;left:4px;position:absolute;right:4px;top:4px;z-index:100}.filerobot-Pixaforge-overlay *{color:#fff}.filerobot-Pixaforge-Categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:auto;padding:8px 8px 4px}.filerobot-Pixaforge-CategoryCard{cursor:pointer;padding:4px 4px 8px;width:100%}.filerobot-Pixaforge-CategoryCard-image{height:120px;width:100%}.filerobot-Pixaforge-CategoryCard-image img{border-radius:2px;height:100%;width:100%}.filerobot-Pixaforge-CategoryCard-label{font-size:12px;line-height:14px;margin:4px 0 2px}.filerobot-Pixaforge-TagsAndFoundLabel{margin:12px 12px 4px}.filerobot-Pixaforge-TagsAndFoundLabel-foundLabel{display:inline-block}.filerobot-Pixaforge-TagsAndFoundLabel-tags{display:inline;margin-left:6px;margin-right:4px}.filerobot-Pixaforge-TagItem{cursor:pointer;margin:2px}.filerobot-Pixaforge-TagItem span{border:1px solid #92a6bc!important}.filerobot-Pixaforge-TagsAndFoundLabel-showMoreLabel{display:inline-flex;margin-left:8px;margin-top:2px}@keyframes imgPlaceholderSkeleton{0%{background-position:-468px 0}to{background-position:468px 0}}.filerobot-Pixaforge-ImagesGallery{display:flex;flex-direction:column;overflow:auto}.filerobot-Pixaforge-ImagesGallery-imagesWrapper{display:flex;height:100%;overflow:auto;padding:8px 8px 4px;width:100%}.filerobot-Pixaforge-ImagesGallery-imagesWrapper .filerobot-c-empty{align-items:center;font-size:16px;gap:16px;justify-content:center}.filerobot-Pixaforge-PortraitsColumn{flex-grow:1;margin:0 4px}.filerobot-Pixaforge-ImageCell{cursor:pointer;margin-bottom:8px;position:relative}.filerobot-Pixaforge-ImageCell.filerobot-Pixaforge-ImageCell--selected .filerobot-Pixaforge-overlay,.filerobot-Pixaforge-ImageCell:hover .filerobot-Pixaforge-overlay{display:block}.filerobot-Pixaforge-ImageCell.filerobot-Pixaforge-ImageCell--selected img,.filerobot-Pixaforge-ImageCell:hover img{filter:brightness(.8)}.filerobot-Pixaforge-ImageCell:hover .filerobot-Pixaforge-ImageCell-imageInfo{display:block}.filerobot-Pixaforge-ImageCell-imageWrapper{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:imgPlaceholderSkeleton;animation-timing-function:linear;background:#f8fafb;background-image:linear-gradient(90deg,#f8fafb 0,#f1f3f6 30%,#f8fafb 90%,#f8fafb);background-repeat:no-repeat;height:100%;width:100%}.filerobot-Pixaforge-ImageCell-imageWrapper img{border-radius:2px;filter:drop-shadow(0 1px 2px rgba(78,77,77,.15));max-width:100%}.filerobot-Pixaforge-ImageCell-imageInfo{display:none}.filerobot-Pixaforge-ImageCell-authorAndTitle{position:absolute;right:0;text-align:right;top:0;width:80%}.filerobot-Pixaforge-ImageCell-authorAndTitle div{font-size:10px;line-height:12px}.filerobot-Pixaforge-ImageCell-author{font-weight:700;margin-bottom:4px}.filerobot-Pixaforge-ImageCell-imageMeta{align-items:center;bottom:0;display:flex;justify-content:space-between;position:absolute;width:100%}.filerobot-Pixaforge-ImageCell-imageMeta span{font-size:11px;line-height:12px;text-align:center}.filerobot-Pixaforge-LandscapesContainer{display:flex;flex-wrap:wrap}.filerobot-Pixaforge-LandscapesContainer .filerobot-Pixaforge-ImageCell{flex-grow:1;height:160px;margin:4px;max-height:160px}.filerobot-Pixaforge-LandscapesContainer .filerobot-Pixaforge-ImageCell img{max-height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.filerobot-Pixaforge-IconsGallery{display:flex;flex-direction:column;overflow:auto}.filerobot-Pixaforge-IconsGallery-icons{display:flex;flex-wrap:wrap;overflow:auto;padding:8px}.filerobot-Pixaforge-SingleIcon{align-items:center;background-color:#f8fafb;cursor:pointer;display:flex;height:106px;justify-content:center;margin:4px;position:relative;width:106px}.filerobot-Pixaforge-SingleIcon:hover{background-color:#eff3f6}.filerobot-Pixaforge-SingleIcon:hover .filerobot-Pixaforge-overlay{display:block}.filerobot-Pixaforge-SingleIcon--selected{background-color:#eff3f6}.filerobot-Pixaforge-SingleIcon--selected .filerobot-Pixaforge-overlay{display:block}.filerobot-Pixaforge-SingleIcon-icon{align-items:center;color:#5d6d7e;display:flex;height:50px;justify-content:center;max-height:50px;max-width:50px;width:50px}.filerobot-Pixaforge-SingleIcon-icon svg{max-height:100%;max-width:100%}.filerobot-Pixaforge-CustomizeIcons{display:flex;flex-direction:column;overflow:auto;padding:12px 8px 0}.filerobot-Pixaforge-ColorCustomization{margin:0 4px}.filerobot-Pixaforge-CustomizedIcons-title{margin:0 0 12px 4px}.filerobot-Pixaforge-CustomizedIcons-title svg{height:12px;margin-left:6px;width:12px}.filerobot-Pixaforge-CustomizeIcons-iconsWrapper{display:flex;flex-wrap:wrap;margin:12px 0;overflow:auto}.filerobot-Pixaforge-ColorCustomization-rgbField{margin-right:4px;max-width:80px}.filerobot-Pixaforge-ColorCustomization-removeButton{display:inline-flex;margin-left:8px}

package/lib/api.service.js

@@ -0,0 +1,93 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { DEFAULT_ICONS_COLOR } from './constants';
+var baseUrl = 'https://www.openpix.net/v3/';
+var CDN_HOST_DOMAIN = '.cloudimg.io';
+var CDN_URL = "https://scaleflex".concat(CDN_HOST_DOMAIN, "/v7/");
+var categoriesImgsUrl = 'https://cdn.scaleflex.com/plugins/filerobot-widget/assets/categories.json?vh=ac2e9b&func=proxy';
+
+// We didn't split them into thunks and reuse the apiClient from the redux store's middleware as it is not that bulky code.
+var _send = function _send(endpoint) {
+  var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'GET';
+  var data = arguments.length > 2 ? arguments[2] : undefined;
+  return new Promise(function (resolve, reject) {
+    var xhr = new XMLHttpRequest();
+    xhr.open(method, endpoint.startsWith('http') ? endpoint : "".concat(baseUrl).concat(endpoint));
+    xhr.responseType = 'json';
+    if (data) xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.onload = function () {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(xhr.response);
+      } else {
+        reject(xhr.status);
+      }
+    };
+    xhr.onerror = function () {
+      reject(xhr.status);
+    };
+    xhr.send(data ? JSON.stringify(data) : null);
+  });
+};
+export var getCategories = function getCategories() {
+  return Promise.all([_send('pictures/tags'), _send(categoriesImgsUrl)]).then(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      _ref2$ = _ref2[0],
+      categoriesResponse = _ref2$ === void 0 ? {} : _ref2$,
+      _ref2$2 = _ref2[1],
+      categoriesImages = _ref2$2 === void 0 ? {} : _ref2$2;
+    return (categoriesResponse.tags || []).map(function (category) {
+      return {
+        name: category.tag,
+        count: category.count,
+        image: "".concat(categoriesImages[category.tag] || categoriesImages["default"], "?w=170")
+      };
+    });
+  });
+};
+export var getImagesAndTags = function getImagesAndTags() {
+  var searchQueries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var limit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
+  return _send("search?q[]=".concat(searchQueries.join('&q[]='), "&limit=").concat(limit, "&offset=").concat(offset)).then(function () {
+    var _response$images, _response$ratio, _response$related_tag, _response$count;
+    var response = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return {
+      images: ((_response$images = response.images) !== null && _response$images !== void 0 ? _response$images : []).map(function (image) {
+        return _objectSpread(_objectSpread({}, image), {}, {
+          preview: image.src.includes(CDN_HOST_DOMAIN) ? "".concat(image.src, "?w=300") : "".concat(CDN_URL).concat(image.src, "?w=300")
+        });
+      }),
+      ratio: (_response$ratio = response.ratio) !== null && _response$ratio !== void 0 ? _response$ratio : 1,
+      tags: (_response$related_tag = response.related_tags) !== null && _response$related_tag !== void 0 ? _response$related_tag : [],
+      totalCount: (_response$count = response.count) !== null && _response$count !== void 0 ? _response$count : 0
+    };
+  });
+};
+export var getIconsAndTags = function getIconsAndTags() {
+  var searchQueries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var limit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
+  return _send("icons?q[]=".concat(searchQueries.join('&q[]='), "&style[]=MONOCOLOR&limit=").concat(limit, "&offset=").concat(offset)).then(function () {
+    var _response$icons, _response$related_tag2, _response$count2;
+    var response = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return {
+      icons: ((_response$icons = response.icons) !== null && _response$icons !== void 0 ? _response$icons : []).map(function (i) {
+        return _objectSpread(_objectSpread({}, i), {}, {
+          color: DEFAULT_ICONS_COLOR
+        });
+      }),
+      tags: (_response$related_tag2 = response.related_tags) !== null && _response$related_tag2 !== void 0 ? _response$related_tag2 : [],
+      totalCount: (_response$count2 = response.count) !== null && _response$count2 !== void 0 ? _response$count2 : 0
+    };
+  });
+};

package/lib/common.slice.js

@@ -0,0 +1,77 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createSlice } from '@reduxjs/toolkit';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { GALLERIES, IMAGES_GALLERY_VIEWS } from './constants';
+var initialState = {
+  currentSelection: [],
+  customizedIcons: [],
+  gallery: GALLERIES.IMAGES,
+  galleryView: IMAGES_GALLERY_VIEWS.STANDARD_PORTRAITS,
+  loading: false
+};
+var commonSlice = createSlice({
+  name: PLUGINS_IDS.PIXAFORGE,
+  initialState: initialState,
+  reducers: {
+    currentSelectionsUpdated: function currentSelectionsUpdated(state, action) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        currentSelection: action.payload
+      });
+    },
+    customizedIconsUpdated: function customizedIconsUpdated(state, action) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        customizedIcons: action.payload
+      });
+    },
+    galleryChanged: function galleryChanged(state, action) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        gallery: action.payload
+      });
+    },
+    galleryViewChanged: function galleryViewChanged(state, action) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        galleryView: action.payload
+      });
+    },
+    loadingToggled: function loadingToggled(state, action) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        loading: !state.loading
+      });
+    },
+    pixaforgeCommonStateUpdated: function pixaforgeCommonStateUpdated(state, action) {
+      return _objectSpread(_objectSpread({}, state), action.payload);
+    }
+  }
+});
+var _commonSlice$actions = commonSlice.actions,
+  currentSelectionsUpdated = _commonSlice$actions.currentSelectionsUpdated,
+  customizedIconsUpdated = _commonSlice$actions.customizedIconsUpdated,
+  galleryChanged = _commonSlice$actions.galleryChanged,
+  galleryViewChanged = _commonSlice$actions.galleryViewChanged,
+  loadingToggled = _commonSlice$actions.loadingToggled,
+  pixaforgeCommonStateUpdated = _commonSlice$actions.pixaforgeCommonStateUpdated;
+export { currentSelectionsUpdated, customizedIconsUpdated, galleryChanged, galleryViewChanged, loadingToggled, pixaforgeCommonStateUpdated };
+export var selectPixaforgeCommonState = function selectPixaforgeCommonState(state) {
+  return state[PLUGINS_IDS.PIXAFORGE];
+};
+export var selectCurrentSelection = function selectCurrentSelection(state) {
+  return selectPixaforgeCommonState(state).currentSelection;
+};
+export var selectCustomizedIcons = function selectCustomizedIcons(state) {
+  return selectPixaforgeCommonState(state).customizedIcons;
+};
+export var selectGallery = function selectGallery(state) {
+  return selectPixaforgeCommonState(state).gallery;
+};
+export var selectGalleryView = function selectGalleryView(state) {
+  return selectPixaforgeCommonState(state).galleryView;
+};
+export var selectIsLoading = function selectIsLoading(state) {
+  return selectPixaforgeCommonState(state).loading;
+};
+export default commonSlice.reducer;

package/lib/components/CategoriesCards/CategoryCard.js

@@ -0,0 +1,33 @@
+import { Image } from '@scaleflex/widget-common';
+import { useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CategoryCard = function CategoryCard(_ref) {
+  var onClick = _ref.onClick,
+    image = _ref.image,
+    name = _ref.name,
+    count = _ref.count;
+  var handleClick = useCallback(function () {
+    if (typeof onClick === 'function') {
+      onClick(name);
+    }
+  }, [name]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "filerobot-Pixaforge-CategoryCard",
+    onClick: handleClick,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "filerobot-Pixaforge-CategoryCard-image",
+      children: /*#__PURE__*/_jsx(Image, {
+        src: image
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "filerobot-Pixaforge-CategoryCard-label",
+        children: name
+      }), /*#__PURE__*/_jsx("span", {
+        className: "filerobot-common-secondaryTxt",
+        children: count
+      })]
+    })]
+  });
+};
+export default CategoryCard;

package/lib/components/CategoriesCards/index.js

@@ -0,0 +1,48 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["name"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useCallback, useEffect, useState } from 'react';
+import CategoryCard from './CategoryCard';
+import { getCategories } from '../../api.service';
+import { jsx as _jsx } from "react/jsx-runtime";
+var CategoriesCards = function CategoriesCards(_ref) {
+  var selectCategory = _ref.selectCategory,
+    setIsLoading = _ref.setIsLoading;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    categories = _useState2[0],
+    setCategories = _useState2[1];
+  var fetchCategories = useCallback(function () {
+    setIsLoading(true);
+    getCategories().then(function (foundCategories) {
+      setCategories(foundCategories.splice(0, 20)); // We use slice to use only first 20 categories (descriptions in T6119 https://sfx.li/xyRTwym9kUsWxR)
+    })["finally"](function () {
+      setIsLoading(false);
+    });
+  }, []);
+  useEffect(fetchCategories, []);
+  return /*#__PURE__*/_jsx("div", {
+    className: "filerobot-Pixaforge-Categories",
+    children: categories.map(function (_ref2) {
+      var name = _ref2.name,
+        rest = _objectWithoutProperties(_ref2, _excluded);
+      return /*#__PURE__*/_jsx(CategoryCard, _objectSpread({
+        name: name,
+        onClick: selectCategory
+      }, rest), name);
+    })
+  });
+};
+export default CategoriesCards;