superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_8__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_7__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 483);
+/******/ 	return __webpack_require__(__webpack_require__.s = 536);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 36:
+/***/ 33:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -17296,11 +17296,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(38), __webpack_require__(46)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(50)(module)))
 
 /***/ }),
 
-/***/ 38:
+/***/ 35:
 /***/ (function(module, exports) {
 
 var g;
@@ -17328,7 +17328,7 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 39:
+/***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28217,7 +28217,7 @@ return jQuery;
 
 /***/ }),
 
-/***/ 46:
+/***/ 50:
 /***/ (function(module, exports) {
 
 module.exports = function(module) {
@@ -28246,29 +28246,29 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 483:
+/***/ 536:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(36);
+__webpack_require__(33);
 
-__webpack_require__(39);
+__webpack_require__(41);
 
-__webpack_require__(484);
+__webpack_require__(537);
 
-__webpack_require__(486);
+__webpack_require__(539);
 
-__webpack_require__(488);
+__webpack_require__(541);
 
 __webpack_require__(0);
 
-__webpack_require__(8);
+__webpack_require__(7);
 
 /***/ }),
 
-/***/ 484:
+/***/ 537:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(39), __webpack_require__(485) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(538) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 485:
+/***/ 538:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29039,7 +29039,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(39) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 486:
+/***/ 539:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(487);
+__webpack_require__(540);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 487:
+/***/ 540:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65672,20 +65672,20 @@ $provide.value("$locale", {
 })(window);
 
 !window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(window.angular.element('<style>').text('@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}'));
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(39)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(41)))
 
 /***/ }),
 
-/***/ 488:
+/***/ 541:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(489);
+__webpack_require__(542);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 489:
+/***/ 542:
 /***/ (function(module, exports) {
 
 /**
@@ -69964,10 +69964,10 @@ angular.module('ngAnimate', [], function initAngularHelpers() {
 
 /***/ }),
 
-/***/ 8:
+/***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
 
 /***/ })
 

package/examples/css/docs-page.css

@@ -531,7 +531,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     margin: 0;
     font-size: 13px;
     line-height: 1.42857143;
-    color: #333;
+    color: hsl(214, 13%, 20%);
     word-break: break-all;
     word-wrap: break-word;
     background-color: #eee;
@@ -539,11 +539,11 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
     border-radius: 2px;
 }
 .docs-page__code-window {
-    border: 1px solid rgba(123, 123, 123, 0.2);
+    border: 1px solid hsla(0, 0%, 48%, 0.2);
     border-radius: 2px;
     margin: 10px 0 20px;
-    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.07);
-    box-shadow: 0 2px 8px rgba(0,0,0,.07);
+    -webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
+    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
 }
 .docs-page__window-bar {
     padding: 10px;

package/examples/index.js

@@ -418,6 +418,10 @@ export default angular.module('ui-docs', [
             'core-layout': {
                 name: 'Core Layout',
                 component: 'CoreLayout'
+            },
+            'multiedit': {
+                name: 'Multiedit',
+                component: 'Multiedit'
             }
         }
     }))

package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx

@@ -5,6 +5,7 @@ import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
 import { BottomNav } from '../../../../app-typescript/components/Navigation/BottomNav';
+import { clone } from 'lodash';
 
 interface IProps {
     children?: React.ReactNode;
@@ -19,6 +20,7 @@ interface IState {
     theme: 'dark' | 'light' | string;
     mainMenuOpen: boolean;
     notificationsOpen: boolean;
+    botNavArray: any;
 }
 
 export class CoreLayout extends React.Component<IProps, IState> {
@@ -28,9 +30,16 @@ export class CoreLayout extends React.Component<IProps, IState> {
             theme: 'light',
             mainMenuOpen: false,
             notificationsOpen: false,
+            botNavArray: [
+                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => false, onRemove: (e) => this.handleDelete(e) },
+                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+                            { title: 'Donec sed odio dui.', onClick: () => false, onRemove: (e) => this.handleDelete(e)},
+            ]
         }
         this.handleMainMenu = this.handleMainMenu.bind(this);
         this.handleNotifications = this.handleNotifications.bind(this);
+        this.handleDelete = this.handleDelete.bind(this);
     }
 
     handleMainMenu() {
@@ -38,56 +47,65 @@ export class CoreLayout extends React.Component<IProps, IState> {
             mainMenuOpen: !state.mainMenuOpen,
         }));
     }
+
     handleNotifications() {
         this.setState((state) => ({
             notificationsOpen: !state.notificationsOpen,
         }));
     }
+    
+    handleDelete(indexNumber: number) {
+        const newItems = clone(this.state.botNavArray);
+        newItems.splice(indexNumber, 1);
 
+        this.setState({
+            botNavArray: newItems,
+        });  
+    }
 
     render() {
         return (
             <Layout.CoreLayout
-                heading='Core Layout'
-                menuOpen={this.state.mainMenuOpen}
-                onClick={this.handleMainMenu}
-                active={this.state.mainMenuOpen}
-                ariaControls='main-menu'
-                menuId='main-menu'
-                slideInMenu={(
-                    <Layout.MainMenu
-                        headerTitle='Main Menu'
-                        poweredBy='Powered by Superdesk technology'
-                        header={(null)}
-                        footerContent={true}
-                        footer={(
-                            <p>Menu footer testing</p>
-                        )}
-                    >
-                        <LeftMenu 
-                            style='blanc'
-                            reverseItemBorder={true}
-                            size='large'
-                            ariaLabel={'Left navigation'}   
-                            activeItemId='1'
-                            groups={[
-                                { label: 'MAIN SECTIONS', items: [
-                                    { id: '1', label: 'Section 1', ref:'section1'},
-                                    { id: '2', label: 'Section 2', ref: 'section2' },
-                                    { id: '3', label: 'Section 3', ref: 'section3' },
-                                
-                                ]},
-                                { label:'OTHER SECTIONS', items: [
-                                    { id: '4', label: 'Section 4', ref: 'section4' },
-                                    { id: '5', label: 'Section 5', ref: 'section5' },
-                                ]},
-                                { label:'OTHER SECTIONS', items: [
-                                    { id: '6', label: 'Section 6', ref: 'section6' },
-                                    { id: '7', label: 'Section 7', ref: 'section7' },
-                                ]}
-                            ]}
-                        onSelect={() => false} />
-                    </Layout.MainMenu>
+            heading='Core Layout'
+            menuOpen={this.state.mainMenuOpen}
+            onClick={this.handleMainMenu}
+            active={this.state.mainMenuOpen}
+            ariaControls='main-menu'
+            menuId='main-menu'
+            editorFullWidth={false}
+            slideInMenu={(
+                <Layout.MainMenu
+                headerTitle='Main Menu'
+                poweredBy='Powered by Superdesk technology'
+                header={(null)}
+                footerContent={true}
+                footer={(
+                    <p>Menu footer testing</p>
+                )}>
+                    <LeftMenu 
+                    style='blanc'
+                    reverseItemBorder={true}
+                    size='large'
+                    ariaLabel={'Left navigation'}   
+                    activeItemId='1'
+                    groups={[
+                        { label: 'MAIN SECTIONS', items: [
+                            { id: '1', label: 'Section 1', ref:'section1'},
+                            { id: '2', label: 'Section 2', ref: 'section2' },
+                            { id: '3', label: 'Section 3', ref: 'section3' },
+                        
+                        ]},
+                        { label:'OTHER SECTIONS', items: [
+                            { id: '4', label: 'Section 4', ref: 'section4' },
+                            { id: '5', label: 'Section 5', ref: 'section5' },
+                        ]},
+                        { label:'OTHER SECTIONS', items: [
+                            { id: '6', label: 'Section 6', ref: 'section6' },
+                            { id: '7', label: 'Section 7', ref: 'section7' },
+                        ]}
+                    ]}
+                    onSelect={() => false} />
+                </Layout.MainMenu>
                 )}
                 topMenu={(
                     <NavButton badgeValue='6' icon='bell' text='Show notifications' onClick={this.handleNotifications} />
@@ -96,22 +114,16 @@ export class CoreLayout extends React.Component<IProps, IState> {
                     <>
                     <Layout.BottomBarAction onClick={()=> false} />
                     <BottomNav
-                        items={[
-                            { icon:'photo', title: 'Sed posuere consectetur est at lobortis.', onClick: () => console.log('test1') },
-                            { title: 'Nullam id dolor id nibh ultricies.', onClick: () => console.log('test2')},
-                            { icon:'video', title: 'Nulla vitae elit libero, a pharetra augue.', onClick: () => false},
-                            { title: 'Donec sed odio dui.', onClick: () => false},
-                    ]} />
+                        items={this.state.botNavArray} />
                     </>
                 )}
                 overlay={(
                     <Layout.NotificationPanel
-                        header={(null)}
-                        headerTitle='Notifications'
-                        open={this.state.notificationsOpen}
-                        onClick={this.handleNotifications}
-                        theme='dark'
-                    >
+                    header={(null)}
+                    headerTitle='Notifications'
+                    open={this.state.notificationsOpen}
+                    onClick={this.handleNotifications}
+                    theme='dark'>
                         <BoxedList>
                             <BoxedListItem unread={true}>
                                 <Time datetime='29.06.2022'>29.06.2022</Time>
@@ -137,8 +149,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
                         </BoxedList>
 
                     </Layout.NotificationPanel>
-                )}
-            >
+                )}>
             </Layout.CoreLayout>
         );
     }

package/examples/pages/playgrounds/react-playgrounds/Index.tsx

@@ -4,6 +4,7 @@ export { TestGround } from './TestGround';
 export { UiPlayground } from './UiPlayground';
 export { PageLayoutTest } from './PageLayoutTest';
 export { EditorTest } from './EditorTest';
+export { Multiedit } from './Multiedit';
 export { RundownEditor } from './RundownEditor';
 export { PersonalProfile } from './PersonalProfile';
 export { Rundowns } from './Rundowns';