superdesk-ui-framework 4.0.24 → 4.0.25

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom"), require("angular")) : factory(root["react"], root["react-dom"], root["angular"]);
 		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_9__, __WEBPACK_EXTERNAL_MODULE_805__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_806__) {
 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 = 802);
+/******/ 	return __webpack_require__(__webpack_require__.s = 803);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -28246,7 +28246,7 @@ return jQuery;
 
 /***/ }),
 
-/***/ 802:
+/***/ 803:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -28256,19 +28256,19 @@ __webpack_require__(18);
 
 __webpack_require__(74);
 
-__webpack_require__(803);
-
-__webpack_require__(805);
+__webpack_require__(804);
 
 __webpack_require__(806);
 
+__webpack_require__(807);
+
 __webpack_require__(0);
 
 __webpack_require__(9);
 
 /***/ }),
 
-/***/ 803:
+/***/ 804:
 /***/ (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__(74), __webpack_require__(804) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(74), __webpack_require__(805) ], __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;
 
 /***/ }),
 
-/***/ 804:
+/***/ 805:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,23 +29060,23 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 805:
+/***/ 806:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_805__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_806__;
 
 /***/ }),
 
-/***/ 806:
+/***/ 807:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(807);
+__webpack_require__(808);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 807:
+/***/ 808:
 /***/ (function(module, exports) {
 
 /**

package/examples/pages/components/BoxedList.tsx

@@ -30,6 +30,15 @@ export default class BoxedListDoc extends React.Component {
                             <BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
                         </BoxedList>
 
+                        <p className="docs-page__paragraph">// with colored background (affects only success, warning, alert and highlight types)</p>
+
+                        <BoxedList>
+                            <BoxedListItem coloredBg type='success'>Succes, donec sed odio dui.</BoxedListItem>
+                            <BoxedListItem coloredBg type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
+                            <BoxedListItem coloredBg type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
+                            <BoxedListItem coloredBg type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
+                        </BoxedList>
+
                         <p className="docs-page__paragraph">// clickable, with media and actions</p>
 
                         <BoxedList>
@@ -200,6 +209,15 @@ export default class BoxedListDoc extends React.Component {
                             <BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
                         </BoxedList>
 
+                        // with colored background (affects only success, warning, alert and highlight types)</p>
+
+                        <BoxedList>
+                            <BoxedListItem coloredBg type='success'>Succes, donec sed odio dui.</BoxedListItem>
+                            <BoxedListItem coloredBg type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
+                            <BoxedListItem coloredBg type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
+                            <BoxedListItem coloredBg type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
+                        </BoxedList>
+
                         // clickable, with media and actions
 
                         <BoxedList>
@@ -350,12 +368,19 @@ export default class BoxedListDoc extends React.Component {
                 </PropsList>
                 <p className="docs-page__paragraph">BoxedListItem</p>
                 <PropsList>
+                    <Prop name='density' isRequired={false} type='compact | comfortable | loose' default='comfortable' description='Changes the outside padding of the list item.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
                     <Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
                     <Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
+                    <Prop name='unread' isRequired={false} type='boolean' default='false' description='Changes the state to unread and adds apropriate styling for it.'/>
+                    <Prop name='alignVertical' isRequired={false} type='start | center' default='/' description='Changes the verticla alignment of the content inside list items.'/>
                     <Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
-                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
+                    <Prop name='coloredBg' isRequired={false} type='boolean' default='false' description='Adds a colored background to the list item (affects only success, warning, alert and highlight types).'/>
+                    <Prop name='onClick' isRequired={false} type='function' default='/' description='Callback fired when pressed (combine with clickable prop).'/>
+                    <Prop name='media' isRequired={false} type='React.ReactNode' default='/' description='Adds a media element (icon, avatar, etc.) to the list item.'/>
+                    <Prop name='footer' isRequired={false} type='React.ReactNode' default='/' description='Adds a footer to the list item.'/>
+                    <Prop name='actions' isRequired={false} type='React.ReactNode' default='/' description='Adds a actions to the list item.'/>
                 </PropsList>
-
             </section>
         )
     }

package/examples/pages/components/RadioGroup.tsx

@@ -13,6 +13,9 @@ interface IState {
     value6?: string;
     value7?: string;
     value8?: string;
+    value9?: string;
+    value10?: string;
+    value11?: string;
 }
 
 export default class RadioGroupDoc extends React.Component<{}, IState> {
@@ -28,6 +31,9 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
             value6: undefined,
             value7: undefined,
             value8: undefined,
+            value9: undefined,
+            value10: undefined,
+            value11: undefined,
         };
     }
     render() {
@@ -158,6 +164,16 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                                 {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
                             ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
                         </div>
+
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With icon & vertical</p>
+                        <div className='form__group'style={{width: 240}}>
+                            <RadioButtonGroup group={{orientation: 'vertical'}} options={[
+                                {value:'test10', label:'Radio button with icon', icon:'list-view'},
+                                {value:'test11', label:'I have an icon!', icon:'grid-view'},
+                                {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
+                            ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
+                        </div>
+
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With icon only (text label is hidden but still accessible to screenreaders)</p>
                         <div className='form__group'>
                             <RadioButtonGroup options={[
@@ -185,14 +201,21 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                             {value:'test9', label:'Button style disabled', disabled:true},
                         ]} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} />
 
-                        // Button styled radio with icon
+                        // With icon
                         <RadioButtonGroup options={[
                             {value:'test10', label:'Radio button with icon', icon:'list-view'},
                             {value:'test11', label:'I have an icon!', icon:'grid-view'},
                             {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
                         ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
 
-                        // Button style radio with icon only (text label is hidden)
+                        // With icon & vertical
+                        <RadioButtonGroup group={{orientation: 'vertical'}} options={[
+                            {value:'test10', label:'Radio button with icon', icon:'list-view'},
+                            {value:'test11', label:'I have an icon!', icon:'grid-view'},
+                            {value:'test12', label:'Yeah, me too!', icon:'kanban-view'},
+                        ]} value={this.state.value4} onChange={(value) => this.setState(() => ({ value4: value }))} />
+
+                        // With icon only (text label is hidden but still accessible to screenreaders)
                         <RadioButtonGroup options={[
                             {value:'test10', label:'Radio button with icon', icon:'list-view', labelHidden: true},
                             {value:'test11', label:'I have an icon!', icon:'grid-view', labelHidden: true},
@@ -220,7 +243,7 @@ export default class RadioGroupDoc extends React.Component<{}, IState> {
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Right</p>
                         <div className='form__row form__row--flex docs-page__test-helper-2'>
-                            <RadioButtonGroup group={{align:'end', groupLabel:'My group label'}} value={this.state.value4} options={[
+                            <RadioButtonGroup group={{align:'end'}} value={this.state.value4} options={[
                                 {value:'test304', label:'Option one'},
                                 {value:'test305', label:'Option two'},
                                 {value:'test306', label:'Option three'},

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

@@ -4,6 +4,7 @@ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdow
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import * as Form from '../../../../app-typescript/components/Form';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
+import { CalendarWeekDayItem } from '../../../../app-typescript/components//Lists/CalendarWeekDayItem';
 
 interface IProps {
     children?: React.ReactNode;
@@ -193,6 +194,122 @@ export class TestGround extends React.Component<IProps, IState> {
                             <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
                         </ButtonGroup>
 
+                        <div className='calendar-user-week-row mb-2 p-2'>
+                            <div className='calendar-week-day__container'>
+                                <CalendarWeekDayItem coloredBg={true}>
+                                    <Avatar
+                                        size="medium"
+                                        imageUrl={null}
+                                        initials="112"
+                                        displayName="Ido Borneman"
+                                    />
+                                    <Text size='medium' className='mt-1 mb-0-5 line-height-sm'>Ido Borneman</Text>
+                                    <Text size='small' color='light'>@COR110</Text>
+                                </CalendarWeekDayItem>
+                            </div>
+                            <div className='calendar-week-day__container'>
+                                <CalendarWeekDayItem state='success' coloredBg={true} disabled={true}>
+                                    <Text size='small'>All day</Text>
+                                    <div className='d-flex flex-wrap gap-0-5 mt-1'>
+                                        <Label text='Antwerpen' type='success' style='translucent'/>
+                                        <Label text='Mechelan' type='success' style='translucent'/>
+                                        <Label text='Turnhout' type='success' style='translucent'/>
+                                    </div>
+                                </CalendarWeekDayItem>
+                            </div>
+                            <div className='calendar-week-day__container d-flex flex-col gap-0-5'>
+                                <CalendarWeekDayItem state='alert' coloredBg={true}>
+                                    <Text size='small'>Not available</Text>
+                                </CalendarWeekDayItem>
+                            </div>
+                            <div className='calendar-week-day__container'>
+                                <CalendarWeekDayItem state='warning' coloredBg={true} hidden={true}>
+                                    <Text size='small'>20:00-23:30</Text>
+                                    <div className='d-flex flex-wrap gap-0-5 mt-1'>
+                                        <Label text='Antwerpen' type='warning' style='translucent'/>
+                                        <Label text='Mechelan' type='warning' style='translucent'/>
+                                        <Label text='Turnhout' type='warning' style='translucent'/>
+                                    </div>
+                                </CalendarWeekDayItem>
+                                <CalendarWeekDayItem state='warning' coloredBg={true}>
+                                    <Text size='small'>20:00-23:30</Text>
+                                    <div className='d-flex flex-wrap gap-0-5 mt-1'>
+                                        <Label text='Antwerpen' type='warning' style='translucent'/>
+                                        <Label text='Mechelan' type='warning' style='translucent'/>
+                                        <Label text='Turnhout' type='warning' style='translucent'/>
+                                    </div>
+                                </CalendarWeekDayItem>
+                            </div>
+                            <div className='calendar-week-day__container'>
+                                <CalendarWeekDayItem state='success' coloredBg={true}>
+                                    <Text size='small'>All day</Text>
+                                    <div className='d-flex flex-wrap gap-0-5 mt-1'>
+                                        <Label text='Antwerpen' type='success' style='translucent'/>
+                                        <Label text='Mechelan' type='success' style='translucent'/>
+                                        <Label text='Turnhout' type='success' style='translucent'/>
+                                    </div>
+                                </CalendarWeekDayItem>
+                            </div>
+                            <div className='calendar-week-day__container d-flex flex-col gap-0-5'>
+                                <CalendarWeekDayItem state='success' coloredBg={true}>
+                                    <Text size='small'>All day</Text>
+                                    <div className='d-flex flex-wrap gap-0-5 mt-1'>
+                                        <Label text='Antwerpen' type='success' style='translucent'/>
+                                        <Label text='Mechelan' type='success' style='translucent'/>
+                                        <Label text='Turnhout' type='success' style='translucent'/>
+                                    </div>
+                                </CalendarWeekDayItem>
+                            </div>
+                            <div className='calendar-week-day__container'>
+                                <CalendarWeekDayItem state='alert' coloredBg={true}>
+                                    <Text size='small'>Not available</Text>
+                                </CalendarWeekDayItem>
+                            </div>
+                            <div className='calendar-week-day__container'>
+                                <CalendarWeekDayItem state='alert' coloredBg={true}>
+                                    <Text size='small'>Not available</Text>
+                                </CalendarWeekDayItem>
+                            </div>
+                        </div>
+
+                        <BoxedList>
+                            <BoxedListItem type='success' density="compact" coloredBg>
+                                <div className='d-flex items-center gap-1'>
+                                <Avatar
+                                        size="small"
+                                        imageUrl={null}
+                                        initials="JL"
+                                        displayName="Jeffrey Lebowski"
+                                    />
+                                    <div>12</div>
+                                </div>
+                            </BoxedListItem>
+                            <BoxedListItem type='warning' density="compact" coloredBg>
+                                <div className='d-flex items-center gap-1'>
+                                <Avatar
+                                        size="small"
+                                        imageUrl={null}
+                                        initials="JL"
+                                        displayName="Jeffrey Lebowski"
+                                    />
+                                    <div>11</div>
+                                </div>
+                            </BoxedListItem>
+                            <BoxedListItem type='alert' density="compact" coloredBg>
+                                <div className='d-flex items-center gap-1'>
+                                <Avatar
+                                        size="small"
+                                        imageUrl={null}
+                                        initials="JL"
+                                        displayName="Jeffrey Lebowski"
+                                    />
+                                    <div>11</div>
+                                </div>
+                            </BoxedListItem>
+                        </BoxedList>
+
+
+
                         <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleFour ? 'new-collapse-box--open' : ''}`}>
                             {/* Header */}
                             <div className='new-collapse-box__header'>

package/package.json

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

package/react/components/Lists/BoxedList.d.ts

@@ -23,6 +23,7 @@ interface IPropsItem {
     clickable?: boolean;
     alignVertical?: 'start' | 'center';
     slideInActions?: boolean;
+    coloredBg?: boolean;
     selected?: boolean;
     unread?: boolean;
     onClick?(): void;

package/react/components/Lists/BoxedList.js

@@ -131,6 +131,7 @@ var BoxedListItem = /** @class */ (function (_super) {
             _a['boxed-list__item--clickable'] = this.props.clickable === true,
             _a['boxed-list__item--selected'] = this.props.selected,
             _a['boxed-list__item--unread'] = this.props.unread,
+            _a['boxed-list__item--colored-bg'] = this.props.coloredBg,
             _a["boxed-list__item--".concat(this.props.type)] = this.props.type || this.props.type !== undefined,
             _a["boxed-list__item--align-".concat(this.props.alignVertical)] = this.props.alignVertical,
             _a));

package/react/components/Lists/CalendarWeekDayItem.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IPropsItem {
+    children?: React.ReactNode;
+    state?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight';
+    clickable?: boolean;
+    coloredBg?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    onClick?(): void;
+}
+declare class CalendarWeekDayItem extends React.PureComponent<IPropsItem> {
+    render(): JSX.Element;
+}
+export { CalendarWeekDayItem };

package/react/components/Lists/CalendarWeekDayItem.js

@@ -0,0 +1,67 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarWeekDayItem = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var CalendarWeekDayItem = /** @class */ (function (_super) {
+    __extends(CalendarWeekDayItem, _super);
+    function CalendarWeekDayItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CalendarWeekDayItem.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('calendar-week-day__item', (_a = {
+                'calendar-week-day__item--clickable': this.props.clickable === true,
+                'calendar-week-day__item--selected': this.props.selected,
+                'calendar-week-day__item--colored-bg': this.props.coloredBg,
+                'calendar-week-day__item--disabled': this.props.disabled,
+                'calendar-week-day__item--hidden': this.props.hidden
+            },
+            _a["calendar-week-day__item--".concat(this.props.state)] = this.props.state || this.props.state !== undefined,
+            _a));
+        return (React.createElement("div", { className: classes }, this.props.children));
+    };
+    return CalendarWeekDayItem;
+}(React.PureComponent));
+exports.CalendarWeekDayItem = CalendarWeekDayItem;

package/react/components/RadioButtonGroup.js

@@ -66,7 +66,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('sd-check-button__group', (_a = {},
             _a["sd-check-button__group--".concat((_b = this.props.group) === null || _b === void 0 ? void 0 : _b.align)] = (_c = this.props.group) === null || _c === void 0 ? void 0 : _c.align,
             _a["sd-check-button__group--start"] = !((_d = this.props.group) === null || _d === void 0 ? void 0 : _d.grid) && ((_e = this.props.group) === null || _e === void 0 ? void 0 : _e.align) === undefined,
-            _a["button-group--vertical"] = ((_f = this.props.group) === null || _f === void 0 ? void 0 : _f.orientation) === 'vertical',
+            _a["sd-check-button__group--vertical"] = ((_f = this.props.group) === null || _f === void 0 ? void 0 : _f.orientation) === 'vertical',
             _a["sd-check-button__group--grid"] = (_g = this.props.group) === null || _g === void 0 ? void 0 : _g.grid,
             _a["sd-check-button__group--padded"] = ((_h = this.props.group) === null || _h === void 0 ? void 0 : _h.padded) === true,
             _a));

package/react/components/avatar/avatar-image.js

@@ -64,7 +64,7 @@ var AvatarContentImage = /** @class */ (function (_super) {
         };
         if (imageUrl == null) {
             return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
-                React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { display: 'block', width: '100%', height: '100%' } },
                     React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0" }),
                     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
         }

package/react/index.d.ts

@@ -98,5 +98,6 @@ export { Spacer, SpacerBlock } from '@superdesk/common';
 export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
+export { CalendarWeekDayItem } from './components/Lists/CalendarWeekDayItem';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePickerV2 = exports.TimePicker = exports.DatePickerISO = exports.DateTimePicker = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.IllustrationButton = exports.SvgIconIllustration = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = void 0;
-exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.showPopup = exports.PopupPositioner = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = void 0;
+exports.CalendarWeekDayItem = exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.showPopup = exports.PopupPositioner = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -236,3 +236,5 @@ var DragHandleDots_1 = require("./components/DragHandleDots");
 Object.defineProperty(exports, "DragHandleDots", { enumerable: true, get: function () { return DragHandleDots_1.DragHandleDots; } });
 var DragHandle_1 = require("./components/DragHandle");
 Object.defineProperty(exports, "DragHandle", { enumerable: true, get: function () { return DragHandle_1.DragHandle; } });
+var CalendarWeekDayItem_1 = require("./components/Lists/CalendarWeekDayItem");
+Object.defineProperty(exports, "CalendarWeekDayItem", { enumerable: true, get: function () { return CalendarWeekDayItem_1.CalendarWeekDayItem; } });