superdesk-ui-framework 3.0.74 → 3.0.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,13 +12,25 @@ $simple-list-border-color: $neutral-border-color;
12
12
  display: flex;
13
13
  flex-direction: row;
14
14
  align-items: center;
15
- gap: 0.8rem;
15
+ gap: var(--space--1);
16
16
  color: var(--color-text);
17
17
 
18
18
  [class^="icon-"], [class*=" icon-"] {
19
19
  flex-grow: 0;
20
20
  flex-shrink: 0;
21
21
  }
22
+ &.simple-list__item--gap-none {
23
+ gap: 0;
24
+ }
25
+ &.simple-list__item--gap-small {
26
+ gap: var(--space-0-5);
27
+ }
28
+ &.simple-list__item--gap-medium {
29
+ gap: var(--space-1);
30
+ }
31
+ &.simple-list__item--gap-large {
32
+ gap: var(--space-1-5);
33
+ }
22
34
  }
23
35
 
24
36
  .simple-list__item--stacked {
@@ -283,6 +283,10 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
283
283
  &:only-child {
284
284
  margin: 0.2rem 0;
285
285
  }
286
+ &.sd-list-item__row--overflow-visible {
287
+ overflow: visible !important;
288
+ }
289
+
286
290
  }
287
291
 
288
292
  .sd-list-item__row--only-child {
@@ -11,6 +11,9 @@
11
11
  --space--3: calc(3 * var(--base-increment)); // 24px;
12
12
  --space--4: calc(4 * var(--base-increment)); // 32px;
13
13
  --space--5: calc(5 * var(--base-increment)); // 40px;
14
+ --space--6: calc(6 * var(--base-increment)); // 48px;
15
+ --space--7: calc(7 * var(--base-increment)); // 56px;
16
+ --space--8: calc(8 * var(--base-increment)); // 64px;
14
17
 
15
18
  --gap--none: 0; // 0px
16
19
  --gap--x-small: 0.4rem; // 4px
@@ -50,6 +53,11 @@
50
53
 
51
54
  // TEXT SIZE
52
55
  --text-size--base: 1rem;
56
+ --text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
57
+ --text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
58
+ --text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;
59
+ --text-size-large: calc(var(--text-size--base) * 2); // 20px;
60
+
53
61
 
54
62
  // SHADOW
55
63
  --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 @@
57
65
  --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);
58
66
  --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);
59
67
 
60
-
61
68
  // DROP-SHADOW Filter
62
69
  --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));
63
70
  --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));
64
71
  --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));
65
72
  --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));
66
73
 
74
+ // FORM ELEMENTS
75
+ // Size
76
+ --form-element-height-small: var(--space--3);
77
+ --form-element-height-medium: var(--space--4);
78
+ --form-element-height-large: var(--space--5);
67
79
  }
68
80
 
81
+
69
82
  :root,
70
83
  [data-theme="light-ui"] {
71
84
  --sd-shadow-outline: hsla(0, 0%, 0%, 0);
@@ -704,7 +704,7 @@
704
704
  @include Line-input-base;
705
705
  display: block;
706
706
  position: relative;
707
- padding-inline-end: 2rem;
707
+ padding-inline-end: var(--space--3);
708
708
  min-width: 5rem;
709
709
  cursor: pointer;
710
710
 
@@ -804,23 +804,30 @@
804
804
  &.sd-input--is-select {
805
805
  &::after {
806
806
  position: relative;
807
- z-index: 1;
807
+ font-family: 'sd_icons';
808
+ content: "\e64b";
808
809
  grid-row: 2/3;
809
810
  grid-column: 2/4;
811
+ --icon-base-size: 14px !important;
812
+ width: var(--icon-base-size);
813
+ height: var(--icon-base-size);
814
+ line-height: var(--icon-base-size);
815
+ font-size: var(--icon-base-size);
816
+ speak: none;
817
+ font-style: normal;
818
+ font-weight: normal;
819
+ font-variant: normal;
820
+ text-transform: none;
821
+ color: var(--color-icon-default);
822
+ -webkit-font-smoothing: antialiased;
810
823
  align-self: center;
811
824
  justify-self: flex-end;
812
825
  display: inline-block;
813
- width: 0;
814
- height: 0;
815
- margin-inline-end: 1rem;
816
- vertical-align: middle;
817
- border-inline-start: 0.4rem solid transparent;
818
- border-inline-end: 0.4rem solid transparent;
819
- border-block-start: 0.4rem solid var(--color-text);
826
+ margin-inline-end: var(--space--1);
820
827
  pointer-events: none;
821
- opacity: 0.4;
822
- content: "";
828
+ opacity: 0.4;
823
829
  z-index: 0;
830
+ transition: opacity 0.2s ease;
824
831
  }
825
832
 
826
833
  &:hover {
@@ -829,6 +836,41 @@
829
836
  }
830
837
  }
831
838
  }
839
+ .sd-input__select-caret-wrapper {
840
+ position: relative;
841
+ display: block;
842
+ &::after {
843
+ --icon-base-size: 14px !important;
844
+ font-family: 'sd_icons';
845
+ content: "\e64b";
846
+ position: absolute;
847
+ inset-block-start: 10px;
848
+ inset-inline-end: 0;
849
+ width: var(--icon-base-size);
850
+ height: var(--icon-base-size);
851
+ line-height: var(--icon-base-size);
852
+ font-size: var(--icon-base-size);
853
+ speak: none;
854
+ font-style: normal;
855
+ font-weight: normal;
856
+ font-variant: normal;
857
+ text-transform: none;
858
+ color: var(--color-text);
859
+ -webkit-font-smoothing: antialiased;
860
+ margin-inline-end: var(--space--1);
861
+ pointer-events: none;
862
+ opacity: 0.6;
863
+ z-index: 0;
864
+ transition: opacity 0.2s ease;
865
+ }
866
+
867
+ &:hover {
868
+ &::after {
869
+ opacity: 1;
870
+ }
871
+ }
872
+ }
873
+
832
874
 
833
875
  .sd-input__message-box {
834
876
  grid-row: 3/4;
@@ -14,7 +14,7 @@ export class FormLabel extends React.PureComponent<IProps> {
14
14
  });
15
15
 
16
16
  return (
17
- <div className={classes}>{this.props.text}</div>
17
+ <label className={classes}>{this.props.text}</label>
18
18
  );
19
19
  }
20
20
  }
@@ -13,6 +13,7 @@ interface IProps {
13
13
  interface IPropsItem {
14
14
  stacked?: boolean;
15
15
  justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
16
+ gap?: 'none' | 'small' | 'medium' | 'large';
16
17
  id?: string;
17
18
  }
18
19
 
@@ -23,6 +24,8 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
23
24
  'simple-list__item--justify-flex-start': this.props.justify === undefined,
24
25
  [`simple-list__item--justify-${this.props.justify}`]:
25
26
  this.props.justify || this.props.justify !== undefined,
27
+ [`simple-list__item--gap-${this.props.gap}`]:
28
+ this.props.gap || this.props.gap !== undefined,
26
29
  });
27
30
  return (
28
31
  <li className={classes} id={this.props.id || undefined}>
@@ -44,17 +44,19 @@ class Select extends React.Component<ISelect> {
44
44
  htmlId={this.htmlId}
45
45
  tabindex={this.props.tabindex}
46
46
  >
47
- <select
48
- className='sd-input__select'
49
- id={this.htmlId}
50
- value={this.props.value}
51
- aria-describedby={this.htmlId}
52
- tabIndex={this.props.tabindex}
53
- onChange={this.handleChange}
54
- disabled={this.props.disabled || this.props.readonly}
55
- >
56
- {this.props.children}
57
- </select>
47
+ <span className='sd-input__select-caret-wrapper'>
48
+ <select
49
+ className='sd-input__select'
50
+ id={this.htmlId}
51
+ value={this.props.value}
52
+ aria-describedby={this.htmlId}
53
+ tabIndex={this.props.tabindex}
54
+ onChange={this.handleChange}
55
+ disabled={this.props.disabled || this.props.readonly}
56
+ >
57
+ {this.props.children}
58
+ </select>
59
+ </span>
58
60
  </InputWrapper>
59
61
  );
60
62
  }
@@ -67051,7 +67051,8 @@ var Select = /** @class */ (function (_super) {
67051
67051
  React.createElement("span", null, this.props.value)));
67052
67052
  }
67053
67053
  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 },
67054
- 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)));
67054
+ React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
67055
+ 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))));
67055
67056
  };
67056
67057
  return Select;
67057
67058
  }(React.Component));
@@ -78293,7 +78294,7 @@ var FormLabel = /** @class */ (function (_super) {
78293
78294
  var classes = (0, classnames_1.default)('form-label form-label--block', {
78294
78295
  'form-label--light': this.props.style === 'light',
78295
78296
  });
78296
- return (React.createElement("div", { className: classes }, this.props.text));
78297
+ return (React.createElement("label", { className: classes }, this.props.text));
78297
78298
  };
78298
78299
  return FormLabel;
78299
78300
  }(React.PureComponent));
@@ -105627,6 +105628,7 @@ var SimpleListItem = /** @class */ (function (_super) {
105627
105628
  'simple-list__item--justify-flex-start': this.props.justify === undefined
105628
105629
  },
105629
105630
  _a["simple-list__item--justify-".concat(this.props.justify)] = this.props.justify || this.props.justify !== undefined,
105631
+ _a["simple-list__item--gap-".concat(this.props.gap)] = this.props.gap || this.props.gap !== undefined,
105630
105632
  _a));
105631
105633
  return (React.createElement("li", { className: classes, id: this.props.id || undefined }, this.props.children));
105632
105634
  };
@@ -139842,7 +139844,12 @@ var TestGround = /** @class */ (function (_super) {
139842
139844
  date: new Date('2022-01-08'),
139843
139845
  time: '16:50',
139844
139846
  modalPlanningTemplates: false,
139847
+ modalSaveEvent: false,
139848
+ modalSaveEvent2: false,
139849
+ modalSaveEvent3: false,
139845
139850
  treeSelectValue: [],
139851
+ value: undefined,
139852
+ valueS2: undefined,
139846
139853
  };
139847
139854
  return _this;
139848
139855
  }
@@ -139856,10 +139863,160 @@ var TestGround = /** @class */ (function (_super) {
139856
139863
  };
139857
139864
  TestGround.prototype.render = function () {
139858
139865
  var _this = this;
139866
+ var avatars = [
139867
+ {
139868
+ imageUrl: null,
139869
+ initials: "VS",
139870
+ displayName: 'Vladimir Stefanovic',
139871
+ icon: { name: 'text', color: 'var(--sd-colour-highlight)' },
139872
+ },
139873
+ {
139874
+ imageUrl: null,
139875
+ initials: "JL",
139876
+ displayName: 'Jeffrey Lebowski',
139877
+ icon: { name: 'photo', color: 'var(--sd-colour-highlight)' }
139878
+ },
139879
+ {
139880
+ imageUrl: null,
139881
+ initials: "WS",
139882
+ displayName: 'Walter Sobchak',
139883
+ icon: { name: 'video', color: 'var(--sd-colour-highlight)' }
139884
+ },
139885
+ {
139886
+ imageUrl: null,
139887
+ initials: "ML",
139888
+ displayName: 'Maude Lebowski',
139889
+ icon: { name: 'file', color: 'var(--sd-colour-highlight)' }
139890
+ },
139891
+ ];
139892
+ var modalSaveEventFooterOne = (React.createElement(index_1.ButtonGroup, { align: "end" },
139893
+ React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent: false }); } }),
139894
+ React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent: false }); } })));
139895
+ var modalSaveEventFooterTwo = (React.createElement(index_1.ButtonGroup, { align: "end" },
139896
+ React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent2: false }); } }),
139897
+ React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent2: false }); } })));
139898
+ var modalSaveEventFooterThree = (React.createElement(index_1.ButtonGroup, { align: "end" },
139899
+ React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent3: false }); } }),
139900
+ React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent3: false }); } })));
139859
139901
  return (React.createElement(Components.Layout, { header: 'Testing Ground' },
139860
139902
  React.createElement(Components.LayoutContainer, null,
139861
139903
  React.createElement(Components.MainPanel, null,
139904
+ React.createElement(index_1.ButtonGroup, null,
139905
+ React.createElement(index_1.Button, { text: "Save Event Modal (Event only)", onClick: function () { return _this.setState({ modalSaveEvent: true }); } }),
139906
+ React.createElement(index_1.Button, { text: "Save Event Modal (Event & Planning)", onClick: function () { return _this.setState({ modalSaveEvent2: true }); } }),
139907
+ React.createElement(index_1.Button, { text: "Save Event Modal (Planning only)", onClick: function () { return _this.setState({ modalSaveEvent3: true }); } })),
139908
+ React.createElement("hr", null),
139909
+ React.createElement("hr", null),
139862
139910
  React.createElement(index_1.Button, { text: "Planning Templates", onClick: function () { return _this.setState({ modalPlanningTemplates: true }); } }),
139911
+ React.createElement("span", null),
139912
+ 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 }); } },
139913
+ React.createElement("div", null,
139914
+ React.createElement(FormLabel_1.FormLabel, { text: 'Name' }),
139915
+ React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
139916
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
139917
+ React.createElement("div", null,
139918
+ React.createElement(FormLabel_1.FormLabel, { text: 'Current Date' }),
139919
+ React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "05.02.2024 @ 10:00")),
139920
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
139921
+ React.createElement("div", null,
139922
+ React.createElement(FormLabel_1.FormLabel, { text: 'Current Repeat Summary' }),
139923
+ React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Every 1 day(s) until CET 28 Feb 2024")),
139924
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
139925
+ React.createElement("div", null,
139926
+ React.createElement(FormLabel_1.FormLabel, { text: 'No. of events' }),
139927
+ React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "1")),
139928
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
139929
+ React.createElement(index_1.Text, { size: 'small', className: 'mb-1 mt-0-5' },
139930
+ React.createElement("strong", null, "This is a recurring event"),
139931
+ ". Update all recurring events or just this one?"),
139932
+ React.createElement(index_1.Select, { value: this.state.value, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (value) {
139933
+ _this.setState({
139934
+ value: value,
139935
+ });
139936
+ } },
139937
+ React.createElement(index_1.Option, null, "This event only"),
139938
+ React.createElement(index_1.Option, null, "This and all future events"),
139939
+ React.createElement(index_1.Option, null, "All events"))),
139940
+ 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 }); } },
139941
+ React.createElement("div", null,
139942
+ React.createElement(FormLabel_1.FormLabel, { text: 'Name' }),
139943
+ React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
139944
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
139945
+ React.createElement("div", null,
139946
+ React.createElement(FormLabel_1.FormLabel, { text: 'Current Date' }),
139947
+ React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "05.02.2024 @ 10:00")),
139948
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
139949
+ React.createElement("div", null,
139950
+ React.createElement(FormLabel_1.FormLabel, { text: 'Current Repeat Summary' }),
139951
+ React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Every 1 day(s) until CET 28 Feb 2024")),
139952
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
139953
+ React.createElement("div", null,
139954
+ React.createElement(FormLabel_1.FormLabel, { text: 'No. of events' }),
139955
+ React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "1")),
139956
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
139957
+ React.createElement(index_1.Text, { size: 'small', className: 'mb-1 mt-0-5' },
139958
+ React.createElement("strong", null, "This is a recurring event"),
139959
+ ". Update all recurring events or just this one?"),
139960
+ React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (value) {
139961
+ _this.setState({
139962
+ value: value,
139963
+ });
139964
+ } },
139965
+ React.createElement(index_1.Option, null, "This event only"),
139966
+ React.createElement(index_1.Option, null, "This and all future events"),
139967
+ React.createElement(index_1.Option, null, "All events")),
139968
+ React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'small' }),
139969
+ React.createElement(index_1.Heading, { type: 'h4', className: 'mb-1' }, "Related Planning(s)"),
139970
+ React.createElement("div", { className: 'sd-list-item-group--space-between-items' },
139971
+ React.createElement("div", { role: "listitem", className: "sd-list-item sd-shadow--z1 mb-1" },
139972
+ React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" }),
139973
+ React.createElement("div", { className: "sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" },
139974
+ React.createElement("div", { className: "sd-list-item__row" },
139975
+ React.createElement("i", { role: "presentation", className: "icon-calendar icon--light-blue" }),
139976
+ React.createElement("span", { className: "sd-list-item__slugline" }, "Planning Slug"),
139977
+ React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow" },
139978
+ React.createElement("span", { className: "sd-list-item__text-strong" }, "Cras justo odio, dapibus ac facilisis in."))),
139979
+ React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1" },
139980
+ React.createElement(index_1.Label, { text: 'draft', style: 'translucent' }),
139981
+ React.createElement("span", { className: "sd-margin-s--auto" },
139982
+ React.createElement(index_1.AvatarGroup, { size: "x-small", items: avatars })))))),
139983
+ React.createElement(index_1.Text, { size: 'small', className: 'mb-1' },
139984
+ React.createElement("strong", null, "You made changes to a planning item that is a part of a recurring event"),
139985
+ ". Update all recurring planning or just this one?"),
139986
+ React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (valueS2) {
139987
+ _this.setState({
139988
+ value: valueS2,
139989
+ });
139990
+ } },
139991
+ React.createElement(index_1.Option, null, "This planning only"),
139992
+ React.createElement(index_1.Option, null, "This and all future plannings"),
139993
+ React.createElement(index_1.Option, null, "All plannings"))),
139994
+ 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 }); } },
139995
+ React.createElement(index_1.Heading, { type: 'h4', className: 'mb-1' }, "Related Planning(s)"),
139996
+ React.createElement("div", { className: 'sd-list-item-group--space-between-items' },
139997
+ React.createElement("div", { role: "listitem", className: "sd-list-item sd-shadow--z1 mb-1" },
139998
+ React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" }),
139999
+ React.createElement("div", { className: "sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" },
140000
+ React.createElement("div", { className: "sd-list-item__row" },
140001
+ React.createElement("i", { role: "presentation", className: "icon-calendar icon--light-blue" }),
140002
+ React.createElement("span", { className: "sd-list-item__slugline" }, "Planning Slug"),
140003
+ React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow" },
140004
+ React.createElement("span", { className: "sd-list-item__text-strong" }, "Cras justo odio, dapibus ac facilisis in."))),
140005
+ React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1" },
140006
+ React.createElement(index_1.Label, { text: 'draft', style: 'translucent' }),
140007
+ React.createElement("span", { className: "sd-margin-s--auto" },
140008
+ React.createElement(index_1.AvatarGroup, { size: "x-small", items: avatars })))))),
140009
+ React.createElement(index_1.Text, { size: 'small', className: 'mb-1' },
140010
+ React.createElement("strong", null, "You made changes to a planning item that is a part of a recurring event"),
140011
+ ". Update all recurring planning or just this one?"),
140012
+ React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (valueS2) {
140013
+ _this.setState({
140014
+ value: valueS2,
140015
+ });
140016
+ } },
140017
+ React.createElement(index_1.Option, null, "This planning only"),
140018
+ React.createElement(index_1.Option, null, "This and all future plannings"),
140019
+ React.createElement(index_1.Option, null, "All plannings"))),
139863
140020
  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 }); } },
139864
140021
  React.createElement("div", { className: 'modal__sticky-header' },
139865
140022
  React.createElement(index_1.SearchBar, { placeholder: 'Search templates', boxed: true },
@@ -144267,7 +144424,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
144267
144424
  /* 693 */
144268
144425
  /***/ (function(module, exports) {
144269
144426
 
144270
- module.exports = {"name":"superdesk-ui-framework","version":"3.0.74","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"}}
144427
+ 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"}}
144271
144428
 
144272
144429
  /***/ }),
144273
144430
  /* 694 */