superdesk-ui-framework 3.0.28 → 3.0.30

package/app/fonts/sd_icons.svg

@@ -194,4 +194,6 @@
 <glyph unicode="&#xe6b8;" glyph-name="list-alt-cancel" d="M67.882 891.8l60.116-60.116 0.002 0.228 128-128-0.002-0.228 63.684-63.684h0.23l64.088-64.088-0.002-0.228 63.684-63.684h0.23l64-64h-0.23l64-64h0.23l64-64h-0.23l64-64h0.23l192.088-192.088-0.004-0.226 60.012-60.012-67.882-67.882-64.208 64.208h-631.918c-34.353 0-63.413 30.677-63.991 63.019l-0.009 0.981-0.002 631.92-127.998 127.998zM832 896c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-632.324l-184.324 184.324h56.324v64h-120.324l-63.998 64h184.322v64h-248.322l-64 64h312.322v64h-376.322l-192 192zM567.918 256l-64 64h-119.918v-64zM320 320h-64v-64h64zM439.918 384l-55.92 55.92 0.002-55.92zM320 448h-64v-64h64zM255.998 567.92l0.002-55.92h55.918z" />
 <glyph unicode="&#xe6b9;" glyph-name="post-cancel" d="M67.882 891.8l59.8-59.8 0.228 0.002 128.090-128.092v-0.228l63.68-63.68h0.228l64-64h-0.228l64-64h0.228l64-64h-0.228l64-64h0.23l128-128h-0.23l252.328-252.328-67.882-67.882-320.21 320.21-311.916-0.002-192-192v695.918l-64 64zM896 832c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-448c0-34.353-28.717-63.413-62.961-63.991l-1.039-0.009-56.326 0.002-256.002 256 184.328-0.002v64l-248.328 0.002-64 64 312.328-0.002v64l-376.328 0.002-128 128zM439.916 384.002l-64 64-119.916-0.002v-64zM311.916 512.002l-55.916 55.916v-55.918z" />
 <glyph unicode="&#xe6ba;" glyph-name="text-block" d="M896 543.95v-191.9c0-53.012-43.038-96.050-96.050-96.050h-575.9c-53.012 0-96.050 43.038-96.050 96.050v191.9c0 53.012 43.039 96.050 96.050 96.050h575.9c53.012 0 96.050-43.038 96.050-96.050zM256 384h512v128h-512zM128 768h768v128h-768zM128 0h768v128h-768z" />
+<glyph unicode="&#xe6bb;" glyph-name="graphic-cancel" d="M656.538 167.882c-43.904-135.078-170.894-232.834-320.534-232.834-185.972 0-336.956 150.984-336.956 336.956 0 149.586 97.684 276.536 232.686 320.486l-231.668 231.562 67.868 67.896 888.476-888.064-67.866-67.898zM256 840.58v119.42h768v-768h-119.12l-113.858 113.806c-14.682 221.54-191.856 398.648-413.422 413.232z" />
+<glyph unicode="&#xe6bc;" glyph-name="play-cancel" d="M192.74 631.466l-192.674 192.586 67.868 67.896 888.476-888.064-67.866-67.898-341.312 341.152-318.874-191.324c-3.724-2.234-7.988-3.416-12.332-3.416-13.15 0-23.97 10.82-23.97 23.97v0.032zM385.242 711.398c-0.79 0.79-0.866 2.042-0.18 2.922 0.688 0.878 1.922 1.106 2.878 0.532 76.324-45.866 409.842-246.29 409.842-246.29 7.204-4.328 11.624-12.142 11.624-20.546 0-8.41-4.424-16.226-11.636-20.554l-80.274-48.164s-269.93 269.806-332.254 332.1z" />
 </font></defs></svg>

package/app/styles/_icon-font.scss

@@ -287,6 +287,8 @@ $sd-icon-font: (
     list-alt-cancel: "\e6b8",
     post-cancel: "\e6b9",
     text-block: "\e6ba",
+    graphic-cancel: "\e6bb",
+    play-cancel: "\e6bc",
 );
 
 @each $name, $value in $sd-icon-font {

package/app/styles/components/_list-item.scss

@@ -1,7 +1,7 @@
 // LIST ITEMS : components/list-items.scss
 // --------------
 
-//background color 
+//background color
 $sd-ListItem-background: var(--sd-item__main-Bg);
 $sd-ListItem-background-hover: var(--sd-item__main-Bg--hover);
 $sd-ListItem-background-selected: var(--sd-item__main-Bg--selected);
@@ -38,7 +38,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         &:hover {
             background-color: $sd-ListItem-background;
             cursor: default;
-        } 
+        }
     }
     &--inactive {
         background-color: transparent;
@@ -140,7 +140,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     background-color: transparent;
     &--locked, &--error {
         background: $red;
-    }    
+    }
     &--success, &--active {
         background: $green;
     }
@@ -198,7 +198,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             justify-content: center;
             z-index: 2;
             opacity: 0;
-            transition: opacity 0.2s linear; 
+            transition: opacity 0.2s linear;
             .sd-check__wrapper {
                 height: 1.6rem;
                 width: 1.6rem;
@@ -222,7 +222,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
             .sd-list-item__checkbox-container {
                 opacity: 1;
             }
-        } 
+        }
     }
 }
 
@@ -313,18 +313,12 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 }
 
 .sd-list-item {
-    [class^="icon-"],
-    [class*=" icon-"] {
-        opacity: 0.75;
-        vertical-align: middle;
-        color: var(--color-icon-default);
-    }
     time {
         [class^="icon-"],
         [class*=" icon-"] {
             vertical-align: top;
             margin-inline-end: 0.2rem;
-        }  
+        }
     }
 }
 
@@ -475,7 +469,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
 }
 .sd-list-item--activated {
 .dropdown__toggle {
-    
+
         [class^="icon-"],
         [class*=" icon-"] {
             opacity: 1;
@@ -586,7 +580,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
                 color: var(--sd-colour-interactive--darken-20);
                 border-bottom: 1px dotted currentColor;
             }
-        }  
+        }
     }
     .sd-list-header__number {
         margin-inline-start: 1rem;

package/dist/examples.bundle.css

@@ -11904,6 +11904,92 @@ doc-react-playground {
   --icon-base-size: 64px
         ; }
 
+.icon-graphic-cancel:before {
+  content: ""; }
+
+.icon-graphic-cancel.color--default {
+  color: var(--color-icon-default); }
+
+.icon-graphic-cancel.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-graphic-cancel.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-graphic-cancel.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-graphic-cancel.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-graphic-cancel.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-graphic-cancel.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-graphic-cancel.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-graphic-cancel.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-graphic-cancel.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-graphic-cancel.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-graphic-cancel.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
+.icon-play-cancel:before {
+  content: ""; }
+
+.icon-play-cancel.color--default {
+  color: var(--color-icon-default); }
+
+.icon-play-cancel.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-play-cancel.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-play-cancel.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-play-cancel.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-play-cancel.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-play-cancel.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-play-cancel.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-play-cancel.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-play-cancel.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-play-cancel.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-play-cancel.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
 .icn-mix {
   position: relative;
   display: inline-flex !important;

package/dist/examples.bundle.js

@@ -63947,7 +63947,7 @@ exports.TagInput = TagInput;
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
-module.exports = {"icon":"photo, video, map-marker, slideshow, text, file, calendar, composite, audio, stream, ingest, archive, time, pin, expand, ascending, descending, th, grid-view, th-list, list-view, pencil, lock, retweet, unspike, fullscreen, fetch-as, search, star, star-empty, multi-star, th-large, grid-view-large, ok, zoom-in, zoom-out, signal, filter-large, trash, user, download, upload, repeat, refresh, list-alt, plus-large, picture, question-sign, info-sign, plus-sign, minus-sign, remove-sign, share-alt, exclamation-sign, eye-open, copy, comment, warning-sign, adjust, folder-close, folder-open, download-alt, tasks, globe, link, expand-thin, assign, dots, dots-vertical, backward-thin, forward-thin, chevron-left-thin, chevron-right-thin, switches, plus-small, minus-small, close-small, post, external, chevron-up-thin, chevron-down-thin, pick, revert, package-plus, list-plus, envelope, heart, home, print, font, bold, italic, underline, strikethrough, align-left, align-center, align-right, align-justify, unordered-list, indent-left, indent-right, ban-circle, bell, random, settings, package-create, list-menu, new-doc, edit-line, calendar-list, collapse, broadcast, broadcast-create, kill, graphic, close-thick, move, takes-package, highlight-package, preview-mode, unlocked, code, cut, paste, arrow-left, arrow-right, info-large, help-large, attachment, attachment-large, table, ordered-list, heading-1, heading-2, heading-3, heading-4, heading-5, heading-6, quote, multiedit, phone, mobile, twitter, facebook, linked-in, twitter-circle, facebook-circle, linked-in-circle, recurring, paragraph, suggestion, event, kanban-view, subscript, superscript, clear-format, preformatted, crop, flip-horizontal, flip-vertical, rotate-right, rotate-left, business, paywall, analytics, amp, undo, redo, instagram, play, stop, pause, fast_rewind, fast_forward, skip_previous, skip_next, add-image, add-gallery, text-format, to-uppercase, to-lowercase, arrow-small, clear-all, rundown, photo-cancel, video-cancel, text-cancel, file-cancel, audio-cancel, list-alt-cancel, post-cancel, text-block"};
+module.exports = {"icon":"photo, video, map-marker, slideshow, text, file, calendar, composite, audio, stream, ingest, archive, time, pin, expand, ascending, descending, th, grid-view, th-list, list-view, pencil, lock, retweet, unspike, fullscreen, fetch-as, search, star, star-empty, multi-star, th-large, grid-view-large, ok, zoom-in, zoom-out, signal, filter-large, trash, user, download, upload, repeat, refresh, list-alt, plus-large, picture, question-sign, info-sign, plus-sign, minus-sign, remove-sign, share-alt, exclamation-sign, eye-open, copy, comment, warning-sign, adjust, folder-close, folder-open, download-alt, tasks, globe, link, expand-thin, assign, dots, dots-vertical, backward-thin, forward-thin, chevron-left-thin, chevron-right-thin, switches, plus-small, minus-small, close-small, post, external, chevron-up-thin, chevron-down-thin, pick, revert, package-plus, list-plus, envelope, heart, home, print, font, bold, italic, underline, strikethrough, align-left, align-center, align-right, align-justify, unordered-list, indent-left, indent-right, ban-circle, bell, random, settings, package-create, list-menu, new-doc, edit-line, calendar-list, collapse, broadcast, broadcast-create, kill, graphic, close-thick, move, takes-package, highlight-package, preview-mode, unlocked, code, cut, paste, arrow-left, arrow-right, info-large, help-large, attachment, attachment-large, table, ordered-list, heading-1, heading-2, heading-3, heading-4, heading-5, heading-6, quote, multiedit, phone, mobile, twitter, facebook, linked-in, twitter-circle, facebook-circle, linked-in-circle, recurring, paragraph, suggestion, event, kanban-view, subscript, superscript, clear-format, preformatted, crop, flip-horizontal, flip-vertical, rotate-right, rotate-left, business, paywall, analytics, amp, undo, redo, instagram, play, stop, pause, fast_rewind, fast_forward, skip_previous, skip_next, add-image, add-gallery, text-format, to-uppercase, to-lowercase, arrow-small, clear-all, rundown, photo-cancel, video-cancel, text-cancel, file-cancel, audio-cancel, list-alt-cancel, post-cancel, text-block, graphic-cancel, play-cancel"};
 
 /***/ }),
 /* 279 */
@@ -142948,7 +142948,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 681 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.28","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.30","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 682 */

package/dist/sd_icons.svg

@@ -194,4 +194,6 @@
 <glyph unicode="&#xe6b8;" glyph-name="list-alt-cancel" d="M67.882 891.8l60.116-60.116 0.002 0.228 128-128-0.002-0.228 63.684-63.684h0.23l64.088-64.088-0.002-0.228 63.684-63.684h0.23l64-64h-0.23l64-64h0.23l64-64h-0.23l64-64h0.23l192.088-192.088-0.004-0.226 60.012-60.012-67.882-67.882-64.208 64.208h-631.918c-34.353 0-63.413 30.677-63.991 63.019l-0.009 0.981-0.002 631.92-127.998 127.998zM832 896c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-632.324l-184.324 184.324h56.324v64h-120.324l-63.998 64h184.322v64h-248.322l-64 64h312.322v64h-376.322l-192 192zM567.918 256l-64 64h-119.918v-64zM320 320h-64v-64h64zM439.918 384l-55.92 55.92 0.002-55.92zM320 448h-64v-64h64zM255.998 567.92l0.002-55.92h55.918z" />
 <glyph unicode="&#xe6b9;" glyph-name="post-cancel" d="M67.882 891.8l59.8-59.8 0.228 0.002 128.090-128.092v-0.228l63.68-63.68h0.228l64-64h-0.228l64-64h0.228l64-64h-0.228l64-64h0.23l128-128h-0.23l252.328-252.328-67.882-67.882-320.21 320.21-311.916-0.002-192-192v695.918l-64 64zM896 832c34.353 0 63.413-28.717 63.991-62.961l0.009-1.039v-448c0-34.353-28.717-63.413-62.961-63.991l-1.039-0.009-56.326 0.002-256.002 256 184.328-0.002v64l-248.328 0.002-64 64 312.328-0.002v64l-376.328 0.002-128 128zM439.916 384.002l-64 64-119.916-0.002v-64zM311.916 512.002l-55.916 55.916v-55.918z" />
 <glyph unicode="&#xe6ba;" glyph-name="text-block" d="M896 543.95v-191.9c0-53.012-43.038-96.050-96.050-96.050h-575.9c-53.012 0-96.050 43.038-96.050 96.050v191.9c0 53.012 43.039 96.050 96.050 96.050h575.9c53.012 0 96.050-43.038 96.050-96.050zM256 384h512v128h-512zM128 768h768v128h-768zM128 0h768v128h-768z" />
+<glyph unicode="&#xe6bb;" glyph-name="graphic-cancel" d="M656.538 167.882c-43.904-135.078-170.894-232.834-320.534-232.834-185.972 0-336.956 150.984-336.956 336.956 0 149.586 97.684 276.536 232.686 320.486l-231.668 231.562 67.868 67.896 888.476-888.064-67.866-67.898zM256 840.58v119.42h768v-768h-119.12l-113.858 113.806c-14.682 221.54-191.856 398.648-413.422 413.232z" />
+<glyph unicode="&#xe6bc;" glyph-name="play-cancel" d="M192.74 631.466l-192.674 192.586 67.868 67.896 888.476-888.064-67.866-67.898-341.312 341.152-318.874-191.324c-3.724-2.234-7.988-3.416-12.332-3.416-13.15 0-23.97 10.82-23.97 23.97v0.032zM385.242 711.398c-0.79 0.79-0.866 2.042-0.18 2.922 0.688 0.878 1.922 1.106 2.878 0.532 76.324-45.866 409.842-246.29 409.842-246.29 7.204-4.328 11.624-12.142 11.624-20.546 0-8.41-4.424-16.226-11.636-20.554l-80.274-48.164s-269.93 269.806-332.254 332.1z" />
 </font></defs></svg>

package/dist/superdesk-ui.bundle.css

@@ -10582,6 +10582,92 @@
   --icon-base-size: 64px
         ; }
 
+.icon-graphic-cancel:before {
+  content: ""; }
+
+.icon-graphic-cancel.color--default {
+  color: var(--color-icon-default); }
+
+.icon-graphic-cancel.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-graphic-cancel.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-graphic-cancel.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-graphic-cancel.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-graphic-cancel.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-graphic-cancel.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-graphic-cancel.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-graphic-cancel.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-graphic-cancel.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-graphic-cancel.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-graphic-cancel.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
+.icon-play-cancel:before {
+  content: ""; }
+
+.icon-play-cancel.color--default {
+  color: var(--color-icon-default); }
+
+.icon-play-cancel.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-play-cancel.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-play-cancel.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-play-cancel.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-play-cancel.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-play-cancel.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-play-cancel.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-play-cancel.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-play-cancel.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-play-cancel.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-play-cancel.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
 .icn-mix {
   position: relative;
   display: inline-flex !important;
@@ -29692,6 +29778,92 @@ a.label {
   --icon-base-size: 64px
         ; }
 
+.icon-graphic-cancel:before {
+  content: ""; }
+
+.icon-graphic-cancel.color--default {
+  color: var(--color-icon-default); }
+
+.icon-graphic-cancel.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-graphic-cancel.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-graphic-cancel.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-graphic-cancel.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-graphic-cancel.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-graphic-cancel.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-graphic-cancel.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-graphic-cancel.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-graphic-cancel.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-graphic-cancel.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-graphic-cancel.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
+.icon-play-cancel:before {
+  content: ""; }
+
+.icon-play-cancel.color--default {
+  color: var(--color-icon-default); }
+
+.icon-play-cancel.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-play-cancel.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-play-cancel.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-play-cancel.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-play-cancel.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-play-cancel.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-play-cancel.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-play-cancel.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-play-cancel.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-play-cancel.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-play-cancel.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
 .icn-mix {
   position: relative;
   display: inline-flex !important;
@@ -41563,12 +41735,6 @@ a.text-link {
 .sd-list-item .badge {
   margin: 0.2rem; }
 
-.sd-list-item [class^="icon-"],
-.sd-list-item [class*=" icon-"] {
-  opacity: 0.75;
-  vertical-align: middle;
-  color: var(--color-icon-default); }
-
 .sd-list-item time [class^="icon-"],
 .sd-list-item time [class*=" icon-"] {
   vertical-align: top;
@@ -61720,6 +61886,92 @@ i.sd-sidetab-menu__helper-icon {
   --icon-base-size: 64px
         ; }
 
+.icon-graphic-cancel:before {
+  content: ""; }
+
+.icon-graphic-cancel.color--default {
+  color: var(--color-icon-default); }
+
+.icon-graphic-cancel.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-graphic-cancel.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-graphic-cancel.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-graphic-cancel.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-graphic-cancel.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-graphic-cancel.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-graphic-cancel.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-graphic-cancel.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-graphic-cancel.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-graphic-cancel.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-graphic-cancel.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
+.icon-play-cancel:before {
+  content: ""; }
+
+.icon-play-cancel.color--default {
+  color: var(--color-icon-default); }
+
+.icon-play-cancel.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-play-cancel.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-play-cancel.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-play-cancel.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-play-cancel.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-play-cancel.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-play-cancel.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-play-cancel.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-play-cancel.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-play-cancel.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-play-cancel.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
 .icn-mix {
   position: relative;
   display: inline-flex !important;

package/dist/superdesk-ui.bundle.js

@@ -63564,7 +63564,7 @@ exports.TagInput = TagInput;
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
-module.exports = {"icon":"photo, video, map-marker, slideshow, text, file, calendar, composite, audio, stream, ingest, archive, time, pin, expand, ascending, descending, th, grid-view, th-list, list-view, pencil, lock, retweet, unspike, fullscreen, fetch-as, search, star, star-empty, multi-star, th-large, grid-view-large, ok, zoom-in, zoom-out, signal, filter-large, trash, user, download, upload, repeat, refresh, list-alt, plus-large, picture, question-sign, info-sign, plus-sign, minus-sign, remove-sign, share-alt, exclamation-sign, eye-open, copy, comment, warning-sign, adjust, folder-close, folder-open, download-alt, tasks, globe, link, expand-thin, assign, dots, dots-vertical, backward-thin, forward-thin, chevron-left-thin, chevron-right-thin, switches, plus-small, minus-small, close-small, post, external, chevron-up-thin, chevron-down-thin, pick, revert, package-plus, list-plus, envelope, heart, home, print, font, bold, italic, underline, strikethrough, align-left, align-center, align-right, align-justify, unordered-list, indent-left, indent-right, ban-circle, bell, random, settings, package-create, list-menu, new-doc, edit-line, calendar-list, collapse, broadcast, broadcast-create, kill, graphic, close-thick, move, takes-package, highlight-package, preview-mode, unlocked, code, cut, paste, arrow-left, arrow-right, info-large, help-large, attachment, attachment-large, table, ordered-list, heading-1, heading-2, heading-3, heading-4, heading-5, heading-6, quote, multiedit, phone, mobile, twitter, facebook, linked-in, twitter-circle, facebook-circle, linked-in-circle, recurring, paragraph, suggestion, event, kanban-view, subscript, superscript, clear-format, preformatted, crop, flip-horizontal, flip-vertical, rotate-right, rotate-left, business, paywall, analytics, amp, undo, redo, instagram, play, stop, pause, fast_rewind, fast_forward, skip_previous, skip_next, add-image, add-gallery, text-format, to-uppercase, to-lowercase, arrow-small, clear-all, rundown, photo-cancel, video-cancel, text-cancel, file-cancel, audio-cancel, list-alt-cancel, post-cancel, text-block"};
+module.exports = {"icon":"photo, video, map-marker, slideshow, text, file, calendar, composite, audio, stream, ingest, archive, time, pin, expand, ascending, descending, th, grid-view, th-list, list-view, pencil, lock, retweet, unspike, fullscreen, fetch-as, search, star, star-empty, multi-star, th-large, grid-view-large, ok, zoom-in, zoom-out, signal, filter-large, trash, user, download, upload, repeat, refresh, list-alt, plus-large, picture, question-sign, info-sign, plus-sign, minus-sign, remove-sign, share-alt, exclamation-sign, eye-open, copy, comment, warning-sign, adjust, folder-close, folder-open, download-alt, tasks, globe, link, expand-thin, assign, dots, dots-vertical, backward-thin, forward-thin, chevron-left-thin, chevron-right-thin, switches, plus-small, minus-small, close-small, post, external, chevron-up-thin, chevron-down-thin, pick, revert, package-plus, list-plus, envelope, heart, home, print, font, bold, italic, underline, strikethrough, align-left, align-center, align-right, align-justify, unordered-list, indent-left, indent-right, ban-circle, bell, random, settings, package-create, list-menu, new-doc, edit-line, calendar-list, collapse, broadcast, broadcast-create, kill, graphic, close-thick, move, takes-package, highlight-package, preview-mode, unlocked, code, cut, paste, arrow-left, arrow-right, info-large, help-large, attachment, attachment-large, table, ordered-list, heading-1, heading-2, heading-3, heading-4, heading-5, heading-6, quote, multiedit, phone, mobile, twitter, facebook, linked-in, twitter-circle, facebook-circle, linked-in-circle, recurring, paragraph, suggestion, event, kanban-view, subscript, superscript, clear-format, preformatted, crop, flip-horizontal, flip-vertical, rotate-right, rotate-left, business, paywall, analytics, amp, undo, redo, instagram, play, stop, pause, fast_rewind, fast_forward, skip_previous, skip_next, add-image, add-gallery, text-format, to-uppercase, to-lowercase, arrow-small, clear-all, rundown, photo-cancel, video-cancel, text-cancel, file-cancel, audio-cancel, list-alt-cancel, post-cancel, text-block, graphic-cancel, play-cancel"};
 
 /***/ }),
 /* 279 */
@@ -124644,7 +124644,7 @@ __webpack_require__(758);
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
-module.exports = {"icon":"photo, video, map-marker, slideshow, text, file, calendar, composite, audio, stream, ingest, archive, time, pin, expand, ascending, descending, th, grid-view, th-list, list-view, pencil, lock, retweet, unspike, fullscreen, fetch-as, search, star, star-empty, multi-star, th-large, grid-view-large, ok, zoom-in, zoom-out, signal, filter-large, trash, user, download, upload, repeat, refresh, list-alt, plus-large, picture, question-sign, info-sign, plus-sign, minus-sign, remove-sign, share-alt, exclamation-sign, eye-open, copy, comment, warning-sign, adjust, folder-close, folder-open, download-alt, tasks, globe, link, expand-thin, assign, dots, dots-vertical, backward-thin, forward-thin, chevron-left-thin, chevron-right-thin, switches, plus-small, minus-small, close-small, post, external, chevron-up-thin, chevron-down-thin, pick, revert, package-plus, list-plus, envelope, heart, home, print, font, bold, italic, underline, strikethrough, align-left, align-center, align-right, align-justify, unordered-list, indent-left, indent-right, ban-circle, bell, random, settings, package-create, list-menu, new-doc, edit-line, calendar-list, collapse, broadcast, broadcast-create, kill, graphic, close-thick, move, takes-package, highlight-package, preview-mode, unlocked, code, cut, paste, arrow-left, arrow-right, info-large, help-large, attachment, attachment-large, table, ordered-list, heading-1, heading-2, heading-3, heading-4, heading-5, heading-6, quote, multiedit, phone, mobile, twitter, facebook, linked-in, twitter-circle, facebook-circle, linked-in-circle, recurring, paragraph, suggestion, event, kanban-view, subscript, superscript, clear-format, preformatted, crop, flip-horizontal, flip-vertical, rotate-right, rotate-left, business, paywall, analytics, amp, undo, redo, instagram, play, stop, pause, fast_rewind, fast_forward, skip_previous, skip_next, add-image, add-gallery, text-format, to-uppercase, to-lowercase, arrow-small, clear-all, rundown, photo-cancel, video-cancel, text-cancel, file-cancel, audio-cancel, list-alt-cancel, post-cancel, text-block"};
+module.exports = {"icon":"photo, video, map-marker, slideshow, text, file, calendar, composite, audio, stream, ingest, archive, time, pin, expand, ascending, descending, th, grid-view, th-list, list-view, pencil, lock, retweet, unspike, fullscreen, fetch-as, search, star, star-empty, multi-star, th-large, grid-view-large, ok, zoom-in, zoom-out, signal, filter-large, trash, user, download, upload, repeat, refresh, list-alt, plus-large, picture, question-sign, info-sign, plus-sign, minus-sign, remove-sign, share-alt, exclamation-sign, eye-open, copy, comment, warning-sign, adjust, folder-close, folder-open, download-alt, tasks, globe, link, expand-thin, assign, dots, dots-vertical, backward-thin, forward-thin, chevron-left-thin, chevron-right-thin, switches, plus-small, minus-small, close-small, post, external, chevron-up-thin, chevron-down-thin, pick, revert, package-plus, list-plus, envelope, heart, home, print, font, bold, italic, underline, strikethrough, align-left, align-center, align-right, align-justify, unordered-list, indent-left, indent-right, ban-circle, bell, random, settings, package-create, list-menu, new-doc, edit-line, calendar-list, collapse, broadcast, broadcast-create, kill, graphic, close-thick, move, takes-package, highlight-package, preview-mode, unlocked, code, cut, paste, arrow-left, arrow-right, info-large, help-large, attachment, attachment-large, table, ordered-list, heading-1, heading-2, heading-3, heading-4, heading-5, heading-6, quote, multiedit, phone, mobile, twitter, facebook, linked-in, twitter-circle, facebook-circle, linked-in-circle, recurring, paragraph, suggestion, event, kanban-view, subscript, superscript, clear-format, preformatted, crop, flip-horizontal, flip-vertical, rotate-right, rotate-left, business, paywall, analytics, amp, undo, redo, instagram, play, stop, pause, fast_rewind, fast_forward, skip_previous, skip_next, add-image, add-gallery, text-format, to-uppercase, to-lowercase, arrow-small, clear-all, rundown, photo-cancel, video-cancel, text-cancel, file-cancel, audio-cancel, list-alt-cancel, post-cancel, text-block, graphic-cancel, play-cancel"};
 
 /***/ })
 /******/ ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.28",
+  "version": "3.0.30",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",