superdesk-ui-framework 3.0.73 → 3.0.75

package/app/styles/_simple-list.scss

@@ -12,13 +12,25 @@ $simple-list-border-color: $neutral-border-color;
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: 0.8rem;
+        gap: var(--space--1);
         color: var(--color-text);
 
         [class^="icon-"], [class*=" icon-"] {
             flex-grow: 0;
             flex-shrink: 0;
         }
+        &.simple-list__item--gap-none {
+            gap: 0;
+        }
+        &.simple-list__item--gap-small {
+            gap: var(--space-0-5);
+        }
+        &.simple-list__item--gap-medium {
+            gap: var(--space-1);
+        }
+        &.simple-list__item--gap-large {
+            gap: var(--space-1-5);
+        }
     }
 
     .simple-list__item--stacked {

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

@@ -283,6 +283,10 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     &:only-child {
         margin: 0.2rem 0;
     }
+    &.sd-list-item__row--overflow-visible {
+        overflow: visible !important;
+    }
+
 }
 
 .sd-list-item__row--only-child {

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -11,6 +11,9 @@
     --space--3: calc(3 * var(--base-increment)); // 24px;
     --space--4: calc(4 * var(--base-increment)); // 32px;
     --space--5: calc(5 * var(--base-increment)); // 40px;
+    --space--6: calc(6 * var(--base-increment)); // 48px;
+    --space--7: calc(7 * var(--base-increment)); // 56px;
+    --space--8: calc(8 * var(--base-increment)); // 64px;
 
     --gap--none: 0; // 0px
     --gap--x-small: 0.4rem; // 4px
@@ -50,6 +53,11 @@
 
     // TEXT SIZE
     --text-size--base: 1rem;
+    --text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
+    --text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
+    --text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;
+    --text-size-large: calc(var(--text-size--base) * 2); // 20px;
+
 
     // SHADOW
     --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
@@ -57,15 +65,20 @@
     --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
     --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.2), 0 6px 16px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.1);
 
-
     // DROP-SHADOW Filter
     --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
     --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
     --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
     --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
 
+    // FORM ELEMENTS
+    // Size 
+    --form-element-height-small: var(--space--3);
+    --form-element-height-medium: var(--space--4);
+    --form-element-height-large: var(--space--5);
 }
 
+
 :root,
 [data-theme="light-ui"] {
     --sd-shadow-outline: hsla(0, 0%, 0%, 0);

package/app/styles/form-elements/_inputs.scss

@@ -704,7 +704,7 @@
     @include Line-input-base;
     display: block;
     position: relative;
-    padding-inline-end: 2rem;
+    padding-inline-end: var(--space--3);
     min-width: 5rem;
     cursor: pointer;
 
@@ -804,23 +804,30 @@
     &.sd-input--is-select {
         &::after {
             position: relative;
-            z-index: 1;
+            font-family: 'sd_icons';
+            content: "\e64b";
             grid-row: 2/3;
             grid-column: 2/4;
+            --icon-base-size: 14px !important;
+            width: var(--icon-base-size);
+            height: var(--icon-base-size);
+            line-height: var(--icon-base-size);
+            font-size: var(--icon-base-size);
+            speak: none;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            color: var(--color-icon-default);
+            -webkit-font-smoothing: antialiased;
             align-self: center;
             justify-self: flex-end;
             display: inline-block;
-            width: 0;
-            height: 0;
-            margin-inline-end: 1rem;
-            vertical-align: middle;
-            border-inline-start: 0.4rem solid transparent;
-            border-inline-end: 0.4rem solid transparent;
-            border-block-start: 0.4rem solid var(--color-text);
+            margin-inline-end: var(--space--1);
             pointer-events: none;
-            opacity: 0.4;
-            content: "";
+            opacity: 0.4; 
             z-index: 0;
+            transition: opacity 0.2s ease;
         }
 
         &:hover {
@@ -829,6 +836,41 @@
             }
         }
     }
+    .sd-input__select-caret-wrapper {
+        position: relative;
+        display: block;
+        &::after {
+            --icon-base-size: 14px !important;
+            font-family: 'sd_icons';
+            content: "\e64b";
+            position: absolute;
+            inset-block-start: 10px;
+            inset-inline-end: 0;
+            width: var(--icon-base-size);
+            height: var(--icon-base-size);
+            line-height: var(--icon-base-size);
+            font-size: var(--icon-base-size);
+            speak: none;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            color: var(--color-text);
+            -webkit-font-smoothing: antialiased;
+            margin-inline-end: var(--space--1);
+            pointer-events: none;
+            opacity: 0.6; 
+            z-index: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        &:hover {
+            &::after {
+                opacity: 1;
+            }
+        }
+    }
+
 
     .sd-input__message-box {
         grid-row: 3/4;

package/app-typescript/components/FormLabel.tsx

@@ -14,7 +14,7 @@ export class FormLabel extends React.PureComponent<IProps> {
         });
 
         return (
-            <div className={classes}>{this.props.text}</div>
+            <label className={classes}>{this.props.text}</label>
         );
     }
 }

package/app-typescript/components/Lists/SimpleList.tsx

@@ -13,6 +13,7 @@ interface IProps {
 interface IPropsItem {
     stacked?: boolean;
     justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
+    gap?: 'none' | 'small' | 'medium' | 'large';
     id?: string;
 }
 
@@ -23,6 +24,8 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
             'simple-list__item--justify-flex-start': this.props.justify === undefined,
             [`simple-list__item--justify-${this.props.justify}`]:
                 this.props.justify || this.props.justify !== undefined,
+            [`simple-list__item--gap-${this.props.gap}`]:
+            this.props.gap || this.props.gap !== undefined,
         });
         return (
             <li className={classes} id={this.props.id || undefined}>

package/app-typescript/components/Lists/TableList.tsx

@@ -28,6 +28,7 @@ export interface IPropsArrayItem {
     hexColor?: string;
     locked?: boolean;
     positionLocked?: boolean;
+    selected?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
 }
@@ -154,6 +155,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                                                             center={item.center}
                                                             end={item.end}
                                                             action={item.action}
+                                                            selected={item.selected}
                                                             onClick={
                                                                 item.onClick
                                                                     ? item.onClick
@@ -204,6 +206,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                                 center={item.center}
                                 end={item.end}
                                 action={item.action}
+                                selected={item.selected}
                                 onClick={
                                     item.onClick
                                         ? item.onClick
@@ -264,6 +267,7 @@ export interface IPropsItem {
     showDragHandle?: 'always' | 'onHover' | 'none';
     locked?: boolean;
     positionLocked?: boolean;
+    selected?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
     onSelect?(): void;
@@ -287,6 +291,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
 
     render() {
         let classes = classNames('table-list__item', {
+            'table-list__item--selected': this.props.selected,
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
             'table-list__item--locked': this.props.locked,

package/app-typescript/components/Select.tsx

@@ -44,17 +44,19 @@ class Select extends React.Component<ISelect> {
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
             >
-                <select
-                    className='sd-input__select'
-                    id={this.htmlId}
-                    value={this.props.value}
-                    aria-describedby={this.htmlId}
-                    tabIndex={this.props.tabindex}
-                    onChange={this.handleChange}
-                    disabled={this.props.disabled || this.props.readonly}
-                >
-                    {this.props.children}
-                </select>
+                <span className='sd-input__select-caret-wrapper'>
+                    <select
+                        className='sd-input__select'
+                        id={this.htmlId}
+                        value={this.props.value}
+                        aria-describedby={this.htmlId}
+                        tabIndex={this.props.tabindex}
+                        onChange={this.handleChange}
+                        disabled={this.props.disabled || this.props.readonly}
+                    >
+                        {this.props.children}
+                    </select>
+                </span>
             </InputWrapper>
         );
     }

package/app-typescript/components/SingleAndDoubleClickFunction.tsx

@@ -5,7 +5,7 @@ export interface ICallbacks {
 
 export function setupSingleAndDoubleClick(): (event: React.MouseEvent, cb: ICallbacks) => void {
     let timer: number | undefined;
-    let delay: number;
+    let delay: number = 250;
 
     return (event, cb: ICallbacks) => {
         clearTimeout(timer);

package/dist/examples.bundle.js

@@ -40989,7 +40989,7 @@ var TableList = /** @class */ (function (_super) {
                                     ? _this.props.itemsDropdown(index)
                                     : []; } })
                             : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                                         ? item.onClick
                                         : undefined, onDoubleClick: item.onDoubleClick
                                         ? item.onDoubleClick
@@ -41003,7 +41003,7 @@ var TableList = /** @class */ (function (_super) {
                                 React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                                     React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
                 : React.createElement("div", { role: 'list', className: classes },
-                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                             ? item.onClick
                             : undefined, onDoubleClick: item.onDoubleClick
                             ? item.onDoubleClick
@@ -41039,6 +41039,7 @@ var TableListItem = /** @class */ (function (_super) {
     TableListItem.prototype.render = function () {
         var _this = this;
         var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--selected': this.props.selected,
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
             'table-list__item--locked': this.props.locked,
@@ -61094,7 +61095,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSingleAndDoubleClick = void 0;
 function setupSingleAndDoubleClick() {
     var timer;
-    var delay;
+    var delay = 250;
     return function (event, cb) {
         clearTimeout(timer);
         if (event.nativeEvent.detail === 1) {
@@ -67050,7 +67051,8 @@ var Select = /** @class */ (function (_super) {
                 React.createElement("span", null, this.props.value)));
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
-            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children)));
+            React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
     };
     return Select;
 }(React.Component));
@@ -78292,7 +78294,7 @@ var FormLabel = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('form-label form-label--block', {
             'form-label--light': this.props.style === 'light',
         });
-        return (React.createElement("div", { className: classes }, this.props.text));
+        return (React.createElement("label", { className: classes }, this.props.text));
     };
     return FormLabel;
 }(React.PureComponent));
@@ -105626,6 +105628,7 @@ var SimpleListItem = /** @class */ (function (_super) {
                 'simple-list__item--justify-flex-start': this.props.justify === undefined
             },
             _a["simple-list__item--justify-".concat(this.props.justify)] = this.props.justify || this.props.justify !== undefined,
+            _a["simple-list__item--gap-".concat(this.props.gap)] = this.props.gap || this.props.gap !== undefined,
             _a));
         return (React.createElement("li", { className: classes, id: this.props.id || undefined }, this.props.children));
     };
@@ -139841,7 +139844,12 @@ var TestGround = /** @class */ (function (_super) {
             date: new Date('2022-01-08'),
             time: '16:50',
             modalPlanningTemplates: false,
+            modalSaveEvent: false,
+            modalSaveEvent2: false,
+            modalSaveEvent3: false,
             treeSelectValue: [],
+            value: undefined,
+            valueS2: undefined,
         };
         return _this;
     }
@@ -139855,10 +139863,160 @@ var TestGround = /** @class */ (function (_super) {
     };
     TestGround.prototype.render = function () {
         var _this = this;
+        var avatars = [
+            {
+                imageUrl: null,
+                initials: "VS",
+                displayName: 'Vladimir Stefanovic',
+                icon: { name: 'text', color: 'var(--sd-colour-highlight)' },
+            },
+            {
+                imageUrl: null,
+                initials: "JL",
+                displayName: 'Jeffrey Lebowski',
+                icon: { name: 'photo', color: 'var(--sd-colour-highlight)' }
+            },
+            {
+                imageUrl: null,
+                initials: "WS",
+                displayName: 'Walter Sobchak',
+                icon: { name: 'video', color: 'var(--sd-colour-highlight)' }
+            },
+            {
+                imageUrl: null,
+                initials: "ML",
+                displayName: 'Maude Lebowski',
+                icon: { name: 'file', color: 'var(--sd-colour-highlight)' }
+            },
+        ];
+        var modalSaveEventFooterOne = (React.createElement(index_1.ButtonGroup, { align: "end" },
+            React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent: false }); } }),
+            React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent: false }); } })));
+        var modalSaveEventFooterTwo = (React.createElement(index_1.ButtonGroup, { align: "end" },
+            React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent2: false }); } }),
+            React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent2: false }); } })));
+        var modalSaveEventFooterThree = (React.createElement(index_1.ButtonGroup, { align: "end" },
+            React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent3: false }); } }),
+            React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent3: false }); } })));
         return (React.createElement(Components.Layout, { header: 'Testing Ground' },
             React.createElement(Components.LayoutContainer, null,
                 React.createElement(Components.MainPanel, null,
+                    React.createElement(index_1.ButtonGroup, null,
+                        React.createElement(index_1.Button, { text: "Save Event Modal (Event only)", onClick: function () { return _this.setState({ modalSaveEvent: true }); } }),
+                        React.createElement(index_1.Button, { text: "Save Event Modal (Event & Planning)", onClick: function () { return _this.setState({ modalSaveEvent2: true }); } }),
+                        React.createElement(index_1.Button, { text: "Save Event Modal (Planning only)", onClick: function () { return _this.setState({ modalSaveEvent3: true }); } })),
+                    React.createElement("hr", null),
+                    React.createElement("hr", null),
                     React.createElement(index_1.Button, { text: "Planning Templates", onClick: function () { return _this.setState({ modalPlanningTemplates: true }); } }),
+                    React.createElement("span", null),
+                    React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterOne, onHide: function () { _this.setState({ modalSaveEvent: false }); } },
+                        React.createElement("div", null,
+                            React.createElement(FormLabel_1.FormLabel, { text: 'Name' }),
+                            React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
+                        React.createElement("div", null,
+                            React.createElement(FormLabel_1.FormLabel, { text: 'Current Date' }),
+                            React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "05.02.2024 @ 10:00")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
+                        React.createElement("div", null,
+                            React.createElement(FormLabel_1.FormLabel, { text: 'Current Repeat Summary' }),
+                            React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Every 1 day(s) until CET 28 Feb 2024")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
+                        React.createElement("div", null,
+                            React.createElement(FormLabel_1.FormLabel, { text: 'No. of events' }),
+                            React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "1")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
+                        React.createElement(index_1.Text, { size: 'small', className: 'mb-1 mt-0-5' },
+                            React.createElement("strong", null, "This is a recurring event"),
+                            ". Update all recurring events or just this one?"),
+                        React.createElement(index_1.Select, { value: this.state.value, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (value) {
+                                _this.setState({
+                                    value: value,
+                                });
+                            } },
+                            React.createElement(index_1.Option, null, "This event only"),
+                            React.createElement(index_1.Option, null, "This and all future events"),
+                            React.createElement(index_1.Option, null, "All events"))),
+                    React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent2, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterTwo, onHide: function () { _this.setState({ modalSaveEvent2: false }); } },
+                        React.createElement("div", null,
+                            React.createElement(FormLabel_1.FormLabel, { text: 'Name' }),
+                            React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
+                        React.createElement("div", null,
+                            React.createElement(FormLabel_1.FormLabel, { text: 'Current Date' }),
+                            React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "05.02.2024 @ 10:00")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
+                        React.createElement("div", null,
+                            React.createElement(FormLabel_1.FormLabel, { text: 'Current Repeat Summary' }),
+                            React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Every 1 day(s) until CET 28 Feb 2024")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
+                        React.createElement("div", null,
+                            React.createElement(FormLabel_1.FormLabel, { text: 'No. of events' }),
+                            React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "1")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
+                        React.createElement(index_1.Text, { size: 'small', className: 'mb-1 mt-0-5' },
+                            React.createElement("strong", null, "This is a recurring event"),
+                            ". Update all recurring events or just this one?"),
+                        React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (value) {
+                                _this.setState({
+                                    value: value,
+                                });
+                            } },
+                            React.createElement(index_1.Option, null, "This event only"),
+                            React.createElement(index_1.Option, null, "This and all future events"),
+                            React.createElement(index_1.Option, null, "All events")),
+                        React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'small' }),
+                        React.createElement(index_1.Heading, { type: 'h4', className: 'mb-1' }, "Related Planning(s)"),
+                        React.createElement("div", { className: 'sd-list-item-group--space-between-items' },
+                            React.createElement("div", { role: "listitem", className: "sd-list-item sd-shadow--z1 mb-1" },
+                                React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" }),
+                                React.createElement("div", { className: "sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" },
+                                    React.createElement("div", { className: "sd-list-item__row" },
+                                        React.createElement("i", { role: "presentation", className: "icon-calendar icon--light-blue" }),
+                                        React.createElement("span", { className: "sd-list-item__slugline" }, "Planning Slug"),
+                                        React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow" },
+                                            React.createElement("span", { className: "sd-list-item__text-strong" }, "Cras justo odio, dapibus ac facilisis in."))),
+                                    React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1" },
+                                        React.createElement(index_1.Label, { text: 'draft', style: 'translucent' }),
+                                        React.createElement("span", { className: "sd-margin-s--auto" },
+                                            React.createElement(index_1.AvatarGroup, { size: "x-small", items: avatars })))))),
+                        React.createElement(index_1.Text, { size: 'small', className: 'mb-1' },
+                            React.createElement("strong", null, "You made changes to a planning item that is a part of a recurring event"),
+                            ". Update all recurring planning or just this one?"),
+                        React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (valueS2) {
+                                _this.setState({
+                                    value: valueS2,
+                                });
+                            } },
+                            React.createElement(index_1.Option, null, "This planning only"),
+                            React.createElement(index_1.Option, null, "This and all future plannings"),
+                            React.createElement(index_1.Option, null, "All plannings"))),
+                    React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent3, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterThree, onHide: function () { _this.setState({ modalSaveEvent3: false }); } },
+                        React.createElement(index_1.Heading, { type: 'h4', className: 'mb-1' }, "Related Planning(s)"),
+                        React.createElement("div", { className: 'sd-list-item-group--space-between-items' },
+                            React.createElement("div", { role: "listitem", className: "sd-list-item sd-shadow--z1 mb-1" },
+                                React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" }),
+                                React.createElement("div", { className: "sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" },
+                                    React.createElement("div", { className: "sd-list-item__row" },
+                                        React.createElement("i", { role: "presentation", className: "icon-calendar icon--light-blue" }),
+                                        React.createElement("span", { className: "sd-list-item__slugline" }, "Planning Slug"),
+                                        React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow" },
+                                            React.createElement("span", { className: "sd-list-item__text-strong" }, "Cras justo odio, dapibus ac facilisis in."))),
+                                    React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1" },
+                                        React.createElement(index_1.Label, { text: 'draft', style: 'translucent' }),
+                                        React.createElement("span", { className: "sd-margin-s--auto" },
+                                            React.createElement(index_1.AvatarGroup, { size: "x-small", items: avatars })))))),
+                        React.createElement(index_1.Text, { size: 'small', className: 'mb-1' },
+                            React.createElement("strong", null, "You made changes to a planning item that is a part of a recurring event"),
+                            ". Update all recurring planning or just this one?"),
+                        React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (valueS2) {
+                                _this.setState({
+                                    value: valueS2,
+                                });
+                            } },
+                            React.createElement(index_1.Option, null, "This planning only"),
+                            React.createElement(index_1.Option, null, "This and all future plannings"),
+                            React.createElement(index_1.Option, null, "All plannings"))),
                     React.createElement(index_1.Modal, { headerTemplate: "Planning templates", zIndex: 10000, visible: this.state.modalPlanningTemplates, contentPadding: 'medium', contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalPlanningTemplates: false }); } },
                         React.createElement("div", { className: 'modal__sticky-header' },
                             React.createElement(index_1.SearchBar, { placeholder: 'Search templates', boxed: true },
@@ -144266,7 +144424,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 693 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.73","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","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","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-12","@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.75","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","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","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-12","@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"}}
 
 /***/ }),
 /* 694 */