superdesk-ui-framework 4.0.51 → 4.0.53

package/dist/playgrounds/boxed-list.html

@@ -1,164 +0,0 @@
-<header class="sd-top-menu">
-    <a class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
-    <p class="sd-top-menu__header">Boxed list</p>
-</header>
-<main class="sd-page" ng-init="darkTheme = false" data-theme="{{darkTheme ? 'dark-ui' : 'light-ui'}}">
-    <section class="sd-page__main-content" ng-class="{'dark-ui': darkTheme == true}">
-        <div class="subnav" ng-class="{'subnav--dark-ui': darkTheme == true}">
-            <h3 class="subnav__page-title">Boxed list</h3>
-            <span class="label label--large label--warning label--no-transform sd-margin-r--2">Work in progress!</span>
-            <span sd-tooltip="Dark mode" flow="left">
-                <span sd-switch ng-model="darkTheme" class="sd-margin-r--2"></span>
-            </span>
-        </div>
-        <div class="sd-page__content">
-            
-            <div style="width: 70%; margin: 100px auto; max-width: 400px; padding: 20px;" class="docs-page__code-window">
-                <ul class="boxed-list">
-                    <li class="boxed-list__item boxed-list__item--clickable">
-                        <div class="boxed-list__item-media">
-                            <figure class="avatar sd-margin--0 deep-orange--600">vs</figure>
-                        </div>
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row">
-                                <span>Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
-                            </div>
-                        </div>
-                    </li>
-                    <li class="boxed-list__item boxed-list__item--success">
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row">
-                                <span>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
-                            </div>
-                        </div>
-                        <div class="boxed-list__static-actions">
-                            <button class="icn-btn"><i class="icon-dots-vertical"></i></button>
-                        </div>
-                    </li>
-                    <li class="boxed-list__item">
-                        <div class="boxed-list__item-media">
-                            <figure class="avatar sd-margin--0">rb</figure>
-                        </div>
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row">
-                                <span>Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam. Donec ullamcorper nulla non metus auctor fringilla</span>
-                            </div>
-                        </div>
-                        <div class="boxed-list__item-footer">
-                            <span>Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
-                        </div>
-                        <div class="boxed-list__static-actions">
-                            <button class="icn-btn"><i class="icon-dots-vertical"></i></button>
-                        </div>
-                    </li>
-                    <li class="boxed-list__item boxed-list__item--warning">
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row">
-                                <span>Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
-                            </div>
-                            <div class="boxed-list__item-content-row">
-                                <span>Maecenas faucibus mollis interdum.</span>
-                            </div>
-                        </div>
-                        <div class="boxed-list__slide-in-actions">
-                            <button class="icn-btn"><i class="icon-dots-vertical"></i></button>
-                        </div>
-                    </li>
-                    <li class="boxed-list__item">
-                        <div class="boxed-list__item-media">
-                            <i class="icon-slideshow icon--2x"></i>
-                        </div>
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row">
-                                <span class="sd-text--bold sd-overflow-ellipsis">Pellentesque ornare lacinia</span>
-                                <span class="label label--success ml-auto">success</span>
-                            </div>
-                            <div class="boxed-list__item-content-row">
-                                <span>Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
-                            </div>
-                        </div>
-                    </li>
-
-                    <li class="boxed-list__item boxed-list__item--selected boxed-list__item--clickable">
-                        <div class="boxed-list__item-media">
-                            <figure class="avatar sd-margin--0 pink--600">mm</figure>
-                        </div>
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text--bold sd-overflow-ellipsis">Max Mustermann</span>
-                                <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.04.2019</time>
-                            </div>
-                            <div class="boxed-list__item-content-row">
-                                <span>Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
-                            </div>
-                        </div>
-                        <div class="boxed-list__static-actions">
-                            <button class="icn-btn"><i class="icon-dots-vertical"></i></button>
-                        </div>
-                    </li>
-                    <li class="boxed-list__item boxed-list__item--clickable">
-                        <div class="boxed-list__item-media">
-                            <i class="icon-composite icon--2x"></i>
-                        </div>
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row">
-                                <span class="sd-text--bold-s">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
-                            </div>
-                        </div>
-                        <div class="boxed-list__static-actions">
-                            <button class="icn-btn"><i class="icon-pencil"></i></button>
-                        </div>
-                    </li>
-                    <li class="boxed-list__item">
-                        <div class="boxed-list__item-media">
-                            <figure class="avatar sd-margin--0 light-green--600">jd</figure>
-                        </div>
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text--bold sd-overflow-ellipsis">Jane Doe</span>
-                                <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.04.2019</time>
-                            </div>
-                            <div class="boxed-list__item-content-row">
-                                <span>Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
-                            </div>
-                        </div>
-                        <div class="boxed-list__static-actions">
-                            <button class="icn-btn"><i class="icon-dots-vertical"></i></button>
-                        </div>
-                    </li>
-                    <li class="boxed-list__item">
-                        <div class="boxed-list__item-content">
-                            <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <time class="sd-text__date-time sd-text__date-time--small">25.04.2019</time>
-                                <span class="ml-auto">by Jane Doe</span>
-                            </div>
-                            <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text--bold sd-overflow-ellipsis">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
-                            </div>
-                            <div class="boxed-list__item-content-row">
-                                <span><span class="sd-text--italic">desk:</span> National</span> <span class="ml-auto"><span class="sd-text--italic">stage:</span> Working</span>
-                            </div>
-                        </div>
-                        <div class="boxed-list__item-footer">
-                            <span class="sd-text--italic sd-padding-r--1">version: 25</span> <span class="label label--yellow2 label--hollow">in progress</span> <button class="btn btn--small btn--hollow ml-auto">revert</button>
-                        </div>
-
-                    </li>
-                    <li class="boxed-list__item boxed-list__item--blank">
-                        <div class="boxed-list__item-content boxed-list__item-content--centered">
-                            <div class="panel-info">
-                                <div class="panel-info__icon">
-                                    <i class="big-icon--comments"></i>
-                                </div>
-                                <h3 class="panel-info__heading">No comments so far.</h3>
-                                <p class="panel-info__description">Be the first one...</p>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </section>
-</main>
-
-

package/dist/playgrounds/cards.html

@@ -1,244 +0,0 @@
-<header class="sd-top-menu">
-    <a class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
-    <p class="sd-top-menu__header">Cards</p>
-</header>
-<main class="sd-page" ng-init="darkUI = false" data-theme="{{darkUI ? 'dark-ui' : 'light-ui'}}">
-    <section class="sd-page__main-content">
-        <div class="subnav">
-            <h2 class="subnav__page-title">Card options</h2>
-            <div class="button-group button-group--right">
-                <button class="sd-navbtn" ng-click="darkUI = !darkUI">
-                    <i class="icon-adjust"></i>
-                </button>
-            </div>
-        </div>
-        <div class="sd-page__content">
-
-            <!-- Flex grid -->
-            <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-6">
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header">
-                        <div class="sd-card__heading">Politic Desk</div>
-                        <a class="icn-btn sd-card__actions"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                    <div class="sd-card__sub-header">Working stage</div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header">
-                        <div class="sd-card__heading">Sports Desk</div>
-                        <a class="icn-btn sd-card__actions"><i class="icon-pencil"></i></a>
-                    </div>
-                    <div class="sd-card__sub-header sd-card__sub-header--success">Working stage</div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--light">
-                        <div class="sd-card__heading">Features Desk</div>
-                        <a class="icn-btn sd-card__actions"><i class="icon-pencil"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                    <div class="sd-card__footer sd-card__footer--right-align">
-                        <a class="icn-btn"><i class="icon-pencil"></i></a>
-                        <a class="icn-btn"><i class="icon-trash"></i></a>
-                        <a class="icn-btn"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--white">
-                        <div class="sd-card__heading">Finance Desk</div>
-                        <a class="icn-btn sd-card__actions"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                    <div class="sd-card__sub-header">Working stage</div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--white">
-                        <div class="sd-card__heading">Features Desk</div>
-                        <a class="icn-btn sd-card__actions"><i class="icon-pencil"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                    <div class="sd-card__footer sd-card__footer--right-align">
-                        <a class="icn-btn"><i class="icon-pencil"></i></a>
-                        <a class="icn-btn"><i class="icon-trash"></i></a>
-                        <a class="icn-btn"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                </div> 
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header">
-                        <div class="sd-card__heading">Entertainment Desk</div>
-                        <a class="icn-btn sd-card__actions"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                    <div class="sd-card__footer sd-card__footer--right-align">
-                        <a class="btn btn--primary">Primary</a>
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--with-thumb">
-                        <div class="sd-card__thumbnail">
-                            <img src="/image_01.jpg" alt="test">
-                        </div>
-                        <a class="icn-btn icn-btn--overlay sd-card__actions"><i class="icon-pencil"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-
-                    </div>
-                    <div class="sd-card__footer sd-card__footer--spread">
-                        <a class="icn-btn"><i class="icon-pencil"></i></a>
-                        <a class="icn-btn"><i class="icon-trash"></i></a>
-                        <a class="icn-btn"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--with-thumb">
-                        <div class="sd-card__thumbnail">
-                            <img src="/image_02.jpg" alt="test">
-                        </div>
-                        <a class="icn-btn icn-btn--overlay sd-card__actions"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-
-                    </div>
-                    <div class="sd-card__footer sd-card__footer--spread">
-                        <a class="btn btn--primary btn--hollow">Previous</a>
-                        <a class="btn btn--primary">Next</a>
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--with-thumb">
-                        <div class="sd-card__thumbnail">
-                            <img src="/image_01.jpg" alt="test">
-                        </div>
-                        <div class="sd-card__heading">Entertainment Desk</div>
-                        <a class="icn-btn icn-btn--overlay sd-card__actions"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                    <div class="sd-card__footer sd-card__footer--right-align">
-                        <a class="btn">Cancel</a>
-                        <a class="btn btn--primary">Save</a>
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--with-thumb">
-                        <div class="sd-card__thumbnail" ng-hide="hideThumb">
-                            <img src="/image_02.jpg" alt="test">
-                        </div>
-                        <div class="sd-card__heading">Entertainment Desk</div>
-                        <a class="icn-btn icn-btn--overlay sd-card__actions"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                    <div class="sd-card__footer sd-card__footer--right-align">
-                        <a class="btn btn--primary btn--hollow" ng-click="hideThumb = !hideThumb">On the right</a>
-                    </div>
-                </div>
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--with-thumb">
-                        <div class="sd-card__thumbnail">
-                            <i class="sd-card__file-type-icn big-icon--document-pdf"></i>
-                        </div>
-                        <a class="icn-btn sd-card__actions"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                    <div class="sd-card__footer ">
-                        <a class="btn btn--primary btn--hollow">On the left</a>
-                    </div>
-                </div>
-
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__header sd-card__header--with-thumb sd-card__header--light">
-                        <div class="sd-card__thumbnail">
-                            <i class="sd-card__file-type-icn big-icon--text"></i>
-                        </div>
-                        <a class="icn-btn sd-card__actions"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                    <div class="sd-card__content">
-                        Content here
-                    </div>
-                    <div class="sd-card__footer sd-card__footer--spread">
-                        <a class="btn btn--primary">Spread</a>
-                        <a class="icn-btn"><i class="icon-pencil"></i></a>
-                        <a class="icn-btn"><i class="icon-trash"></i></a>
-                        <a class="icn-btn"><i class="icon-dots-vertical"></i></a>
-                    </div>
-                </div>
-            </div>
-            <!-- End -->
-            <!-- Flex grid -->
-            <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-4">
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__content">
-                        <div class="sd-line-input sd-line-input--label-left-auto">
-                            <label class="sd-line-input__label">Headline</label>
-                            <input class="sd-line-input__input" type="text">
-                            <div class="sd-line-input__char-count">00/90</div>
-                            <span class="sd-line-input__hint">This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</span> 
-                        </div>
-                    </div>
-                </div>
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__content">
-                        <div class="sd-line-input sd-line-input--label-left-auto">
-                            <label class="sd-line-input__label">Headline</label>
-                            <input class="sd-line-input__input" type="text">
-                        </div>
-                    </div>
-                </div>
-                <div class="sd-card flex-grid__item">
-                    <div class="sd-card__content">
-                        <div class="form__row">
-                            <div class="sd-line-input sd-line-input--label-left">
-                                <label class="sd-line-input__label">Headline</label>
-                                <input class="sd-line-input__input" type="text">
-                            </div>
-                        </div>
-                        <div class="form__row">
-                            <div class="sd-line-input sd-line-input--label-left">
-                                <label class="sd-line-input__label">Slugline</label>
-                                <input class="sd-line-input__input" type="text">
-                            </div>
-                        </div>
-                        <div class="form__row">
-                            <div class="sd-line-input sd-line-input--label-left">
-                                <label class="sd-line-input__label">Slugline</label>
-                                <input class="sd-line-input__input" type="text">
-                            </div>
-                        </div> 
-                    </div>
-                </div>
-            </div>
-            <!-- End -->
-
-        </div>
-    </section>
-</main>

package/dist/playgrounds/circular-progress.html

@@ -1,48 +0,0 @@
-<header class="sd-top-menu">
-    <a class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
-    <p class="sd-top-menu__header">Cards</p>
-</header>
-<main class="sd-page">
-    <section class="sd-page__main-content" ng-class="{'dark-ui': darkUI}">
-        <div class="subnav" ng-class="{'subnav--dark-ui': darkUI}">
-            <h3 class="subnav__page-title">Circular Progress</h3>
-            <button class="navbtn" ng-click="darkUI = !darkUI">
-                <i class="icon-adjust"></i>
-            </button>
-        </div>
-        <div class="sd-page__content">
-            <div style="width: 450px; margin: 100px auto">
-                <sd-line-input
-                    ng-model="value"
-                    data-dark="dark"
-                    data-boxed="boxed"
-                    data-required="required"
-                    data-label="{{'Title'}}"
-                    data-disabled="disabled"
-                    data-maxlength="26">
-                </sd-line-input>
-
-                Value: {{value}} <br><br>
-                Disable: <sd-check ng-model="disabled"></sd-check>
-                Dark <sd-check ng-model="dark"></sd-check>
-                Boxed <sd-check ng-model="boxed"></sd-check>
-                Required <sd-check ng-model="required"></sd-check>
-            </div>
-
-            <div class="circular-progress-bar flex-grid flex-grid--boxed flex-grid--wrap-items" style="width: 450px; margin: 100px auto">
-                <div class="flex-grid__item">
-                    <sd-circular-progress value="progressValue" counter="progressCounter" class="sd-circular-progress--l" error="progressError"></sd-circular-progress>
-                </div>
-                <div class="flex-grid__item">
-                    <sd-line-input
-                        ng-model="progressValue"
-                        data-label="{{'Progress'}}">
-                    </sd-line-input>
-                    Show progress <sd-check ng-model="progressCounter"></sd-check>
-                    Error <sd-check ng-model="progressError"></sd-check>
-                </div>
-            </div>
-        </div>
-    </section>
-</main>
-

package/dist/playgrounds/dummy-data/items.ts

@@ -1,95 +0,0 @@
-const items = [
-    {
-        image: '/d_trump.jpg',
-        imageAlt: 'Moron',
-        title: 'Lorem ipsum dolor sit amet, consectetur',
-        description:
-            'Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.',
-        date: '05.11.2020',
-        type: 'photo',
-        urgency: '1',
-        priority: '3',
-        urgencyColor: 'deep-orange--600',
-        priorityColor: 'light-green--600',
-        locked: true,
-        status: ['selected'],
-        selected: true,
-    },
-    {
-        image: '/obama_2.jpg',
-        imageAlt: 'Barack',
-        title: 'Sed posuere consectetur est at lobortis',
-        description: 'Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper.',
-        date: '05.11.2020',
-        type: 'photo',
-        urgency: '2',
-        priority: '3',
-        urgencyColor: 'deep-orange--500',
-        priorityColor: 'light-green--600',
-        locked: false,
-        status: [],
-        selected: false,
-    },
-    {
-        image: '',
-        imageAlt: '',
-        title: 'Aenean eu leo quam',
-        description: 'Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper.',
-        date: '05.11.2020',
-        type: 'audio',
-        urgency: '2',
-        priority: '5',
-        urgencyColor: 'deep-orange--500',
-        priorityColor: 'blue-grey--300',
-        locked: false,
-        status: [],
-        selected: false,
-    },
-    {
-        image: '/bill.jpg',
-        imageAlt: 'Bill',
-        title: 'Pellentesque ornare sem lacinia quam venenatis',
-        description: 'Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus.',
-        date: '05.11.2020',
-        type: 'photo',
-        urgency: '3',
-        priority: '5',
-        urgencyColor: 'orange--500',
-        priorityColor: 'blue-grey--300',
-        locked: false,
-        status: ['actioning'],
-        selected: false,
-    },
-    {
-        image: '/hillary.jpg',
-        imageAlt: 'Bill',
-        title: 'Donec id elit non mi porta gravida at eget metus',
-        description: 'Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.',
-        date: '05.11.2020',
-        type: 'photo',
-        urgency: '2',
-        priority: '4',
-        urgencyColor: 'deep-orange--500',
-        priorityColor: 'blue-grey--500',
-        locked: false,
-        status: ['fetched'],
-        selected: false,
-    },
-    {
-        image: '/bush_2.jpg',
-        imageAlt: 'W. Bush',
-        title: 'Donec ullamcorper nulla non metus auctor fringilla',
-        description: 'Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.',
-        date: '05.11.2020',
-        type: 'photo',
-        urgency: '3',
-        priority: '5',
-        urgencyColor: 'orange--500',
-        priorityColor: 'blue-grey--300',
-        locked: false,
-        status: [''],
-        selected: false,
-    },
-];
-
-export default items;

package/dist/playgrounds/editor-3-test.html

@@ -1,15 +0,0 @@
-
-<div class="sd-padding--4">
-    <button class="btn btn--primary btn--loading" tabindex="0" aria-label="">
-        <div class="btn__state--loading">
-            <svg class="sd-spinner sd-spinner--mini" viewBox="0 0 48 48">
-                <circle class="sd-spinner__path" cx="24" cy="24" r="18" fill="none" stroke-width="6"></circle>
-            </svg>
-        </div>
-            primary
-    </button>
-</div>
-
-<svg class="sd-spinner sd-spinner sd-spinner--large" viewBox="0 0 48 48">
-    <circle class="sd-spinner__path" cx="24" cy="24" r="18" fill="none" stroke-width="6"></circle>
-</svg>