@oat-sa/tao-core-ui 1.64.1 → 1.64.2

package/src/propertySelector/scss/propertySelector.scss

@@ -1,66 +1,66 @@
-@import 'inc/bootstrap';
-
-.property-selector-container {
-    background-color: $uiGeneralContentBg;
-    border: 1px solid $modalBorderColor;
-    box-shadow: 0px 4px 8px $shadowColor;
-    display: flex;
-    z-index: 1;
-
-    flex-direction: column;
-    width: 35rem;
-    position: absolute;
-
-    .search-property {
-        flex: 0 0 auto;
-        max-width: none;
-        height: 3.25rem;
-        margin: 0.5rem;
-    }
-
-    .property-list-container {
-        flex: 0 1 100%;
-        overflow-y: scroll;
-        border-bottom: 1px solid $modalBorderColor;
-        padding: 0.5rem 0;
-        margin: 0;
-
-        .property-description-container {
-            display: flex;
-            flex-direction: row;
-            align-items: flex-start;
-            padding: 1rem 0;
-            gap: 1rem;
-
-            .property-description {
-                padding-right: 0;
-            }
-
-            .property-description-checkbox {
-                padding-right: 4px;
-            }
-
-            .property-description-class {
-                color: $textSecondary;
-            }
-        }
-    }
-
-    .control-buttons-container {
-        display: flex;
-        flex: 0 0 4.75rem;
-        justify-content: space-between;
-        align-items: center;
-        gap: 1rem;
-        padding: 0.5rem;
-
-        button {
-            flex-grow: 1;
-            text-align: center;
-
-            span.label {
-                display: inline-block;
-            }
-        }
-    }
-}
+@import 'inc/bootstrap';
+
+.property-selector-container {
+    background-color: $uiGeneralContentBg;
+    border: 1px solid $modalBorderColor;
+    box-shadow: 0px 4px 8px $shadowColor;
+    display: flex;
+    z-index: 1;
+
+    flex-direction: column;
+    width: 35rem;
+    position: absolute;
+
+    .search-property {
+        flex: 0 0 auto;
+        max-width: none;
+        height: 3.25rem;
+        margin: 0.5rem;
+    }
+
+    .property-list-container {
+        flex: 0 1 100%;
+        overflow-y: scroll;
+        border-bottom: 1px solid $modalBorderColor;
+        padding: 0.5rem 0;
+        margin: 0;
+
+        .property-description-container {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            padding: 1rem 0;
+            gap: 1rem;
+
+            .property-description {
+                padding-right: 0;
+            }
+
+            .property-description-checkbox {
+                padding-right: 4px;
+            }
+
+            .property-description-class {
+                color: $textSecondary;
+            }
+        }
+    }
+
+    .control-buttons-container {
+        display: flex;
+        flex: 0 0 4.75rem;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.5rem;
+
+        button {
+            flex-grow: 1;
+            text-align: center;
+
+            span.label {
+                display: inline-block;
+            }
+        }
+    }
+}

package/src/propertySelector/tpl/property-description.tpl

@@ -1,13 +1,13 @@
-<li class="property-description-container">
-    <label class="property-description">
-        <span class="property-description-checkbox">
-            <input type="checkbox" data-property-id="{{id}}" {{#if selected}}checked{{/if}} />
-            <span class="icon-checkbox"></span>
-        </span>
-        <span class="property-description-label">
-            {{{dompurify label}}}
-            {{#if alias}}<span class="property-description-alias">({{{dompurify alias}}})</span>{{/if}}
-            {{#if classLabel}}<span class="property-description-class">/ {{{dompurify classLabel}}}</span>{{/if}}
-        </span>
-    </label>
+<li class="property-description-container">
+    <label class="property-description">
+        <span class="property-description-checkbox">
+            <input type="checkbox" data-property-id="{{id}}" {{#if selected}}checked{{/if}} />
+            <span class="icon-checkbox"></span>
+        </span>
+        <span class="property-description-label">
+            {{{dompurify label}}}
+            {{#if alias}}<span class="property-description-alias">({{{dompurify alias}}})</span>{{/if}}
+            {{#if classLabel}}<span class="property-description-class">/ {{{dompurify classLabel}}}</span>{{/if}}
+        </span>
+    </label>
 </li>

package/src/propertySelector/tpl/property-selector.tpl

@@ -1,7 +1,7 @@
-<div class="property-selector-container">
-    <input type="text" class="search-property"/>
-    <ol class="property-list-container">
-    </ol>
-    <div class="control-buttons-container">
-    </div>
+<div class="property-selector-container">
+    <input type="text" class="search-property"/>
+    <ol class="property-list-container">
+    </ol>
+    <div class="control-buttons-container">
+    </div>
 </div>

package/src/report/feedback.tpl

@@ -1,12 +1,12 @@
-<div class="feedback-{{type}} {{#if hasChildren}}hierarchical{{else}}leaf{{/if}}">
-    <span class="icon-{{type}}{{#if hasChildren}} hierarchical-icon{{/if}}"></span>
-    <div class="message">{{{dompurify message}}}</div>
-    {{#each children}}
-        {{{this}}}
-    {{/each}}
-    <div class="actions">
-        {{#each actions}}
-        <button data-trigger="{{id}}" class="action btn-info" title="{{title}}"><span class="icon-{{icon}}"></span>{{label}}</button>
-        {{/each}}
-    </div>
+<div class="feedback-{{type}} {{#if hasChildren}}hierarchical{{else}}leaf{{/if}}">
+    <span class="icon-{{type}}{{#if hasChildren}} hierarchical-icon{{/if}}"></span>
+    <div class="message">{{{dompurify message}}}</div>
+    {{#each children}}
+        {{{this}}}
+    {{/each}}
+    <div class="actions">
+        {{#each actions}}
+        <button data-trigger="{{id}}" class="action btn-info" title="{{title}}"><span class="icon-{{icon}}"></span>{{label}}</button>
+        {{/each}}
+    </div>
 </div>

package/src/report/layout.tpl

@@ -1,11 +1,11 @@
-<div class="component-report{{#if noBorder}} no-border{{/if}}">
-    {{#if detailsButtonVisible}}
-    <label class="fold pseudo-label-box">
-        <span class="check-txt hide">{{__ "Hide detailed report"}}</span>
-        <span class="check-txt show">{{__ "Show detailed report"}}</span>
-        <input type="checkbox"/>
-        <span class="icon-checkbox"></span>
-    </label>
-    {{/if}}
-    <div class="content">{{content}}</div>
+<div class="component-report{{#if noBorder}} no-border{{/if}}">
+    {{#if detailsButtonVisible}}
+    <label class="fold pseudo-label-box">
+        <span class="check-txt hide">{{__ "Hide detailed report"}}</span>
+        <span class="check-txt show">{{__ "Show detailed report"}}</span>
+        <input type="checkbox"/>
+        <span class="icon-checkbox"></span>
+    </label>
+    {{/if}}
+    <div class="content">{{content}}</div>
 </div>

package/src/report.js

@@ -1,184 +1,184 @@
-/**
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; under version 2
- * of the License (non-upgradable).
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- *
- * Copyright (c) 2017 (original work) Open Assessment Technologies SA ;
- */
-
-/**
- * Simple component to display a standard report
- *
- * @example
- * report({
- *       actions: [{
- *           id: 'continue',
- *           icon: 'right',
- *           title: 'Continue to next step',
- *           label: 'Continue'
- *       }]
- *   }, {
- *       type: "warning",
- *       message: "<em>Data not imported. All records are <strong>invalid.</strong></em>",
- *       children: [{
- *           type: "error",
- *          message: "Row 1 Student Number Identifier"
- *       }]
- *   }).on('action-continue', function () {
- *       console.log('go to next step');
- *   }).render('body');
- *
- * @author Sam <sam@taotesting.com>
- */
-import $ from 'jquery';
-import _ from 'lodash';
-import component from 'ui/component';
-import layoutTpl from 'ui/report/layout';
-import feedbackTpl from 'ui/report/feedback';
-
-var _defaults = {
-    showDetailsButton: true,
-    actions: []
-};
-
-/**
- * Array of authorized report types
- * @type {Array}
- */
-var authorizedTypes = ['success', 'info', 'warning', 'error'];
-
-/**
- * Recursive function to render report messages
- *
- * @private
- * @param {Object} data - a standard report object sent by the backend
- * @param {String} data.type - the error type
- * @param {String} data.message - the feedback message
- * @param {Array} [data.children] - children report object
- * @param {Array} [actions] - the actions buttons to be added, only for the first level of the hierarchy
- * @returns {*}
- */
-var _renderFeebacks = function _renderFeebacks(data, actions) {
-    var children = [];
-    if (!data.type || authorizedTypes.indexOf(data.type) === -1) {
-        throw new TypeError('Unkown report type: ' + data.type);
-    }
-    if (_.isArray(data.children) && data.children.length) {
-        _.each(data.children, function(child) {
-            children.push(_renderFeebacks(child));
-        });
-    }
-    data.hasChildren = children.length > 0;
-    data.children = children;
-    data.actions = actions;
-    return feedbackTpl(data);
-};
-
-var report = {
-    /**
-     * Check if the details of the report are currently visible
-     * @returns {Boolean}
-     */
-    isDetailed: function isDetailed() {
-        return this.is('detailed');
-    },
-    /**
-     * Show the report details
-     *
-     * @returns {this}
-     * @fires reportComponent#showDetails
-     */
-    showDetails: function showDetails() {
-        if (this.is('rendered')) {
-            this.setState('detailed', true);
-            this.getElement()
-                .find('.fold input')
-                .prop('checked', true);
-            this.trigger('showDetails');
-        }
-        return this;
-    },
-    /**
-     * Hide the report details
-     *
-     * @returns {this}
-     * @fires reportComponent#hideDetails
-     */
-    hideDetails: function hideDetails() {
-        if (this.is('rendered')) {
-            this.setState('detailed');
-            this.getElement()
-                .find('.fold input')
-                .prop('checked', false);
-            this.trigger('hideDetails');
-        }
-        return this;
-    }
-};
-
-/**
- * Create a simple report component
- *
- * @param {Object} config
- * @param {Boolean} [config.showDetailsButton=true] - display the show/hide details toggle
- * @param {Array} [config.actions] - possibility to add more button controls
- * @param {Object} data - a standard report object
- * @param {String} data.type - the type of the report
- * @param {String} data.message - the message to be included in the report body (html allowed)
- * @param {Array} [data.children] - children report object
- * @returns {reportComponent}
- */
-var reportComponentFactory = function reportComponentFactory(config, data) {
-    var initConfig = _.defaults(config || {}, _defaults);
-
-    if (data && _.isArray(data.children) && data.children.length) {
-        initConfig.detailsButtonVisible = initConfig.showDetailsButton;
-    }
-
-    /**
-     * THe report component
-     * @typedef reportComponent
-     * @fires reportComponent#action
-     * @fires reportComponent#action-{custom action name}
-     */
-    return component(report)
-        .setTemplate(layoutTpl)
-        .on('render', function() {
-            var self = this;
-            var $content = this.getElement().find('.content');
-            var $checkbox = this.getElement().find('.fold input');
-            $content.append(_renderFeebacks(_.cloneDeep(data), this.config.actions));
-
-            //init actions:
-            $content.on('click', '.action', function() {
-                var actionId = $(this).data('trigger');
-                self.trigger('action-' + actionId);
-                self.trigger('action', actionId);
-            });
-
-            //ensure multiple fast clicks only activate the toggle once
-            $checkbox.on(
-                'change',
-                _.throttle(function() {
-                    if (self.isDetailed()) {
-                        self.hideDetails();
-                    } else {
-                        self.showDetails();
-                    }
-                }, 100)
-            );
-        })
-        .init(initConfig);
-};
-
-export default reportComponentFactory;
+/**
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; under version 2
+ * of the License (non-upgradable).
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * Copyright (c) 2017 (original work) Open Assessment Technologies SA ;
+ */
+
+/**
+ * Simple component to display a standard report
+ *
+ * @example
+ * report({
+ *       actions: [{
+ *           id: 'continue',
+ *           icon: 'right',
+ *           title: 'Continue to next step',
+ *           label: 'Continue'
+ *       }]
+ *   }, {
+ *       type: "warning",
+ *       message: "<em>Data not imported. All records are <strong>invalid.</strong></em>",
+ *       children: [{
+ *           type: "error",
+ *          message: "Row 1 Student Number Identifier"
+ *       }]
+ *   }).on('action-continue', function () {
+ *       console.log('go to next step');
+ *   }).render('body');
+ *
+ * @author Sam <sam@taotesting.com>
+ */
+import $ from 'jquery';
+import _ from 'lodash';
+import component from 'ui/component';
+import layoutTpl from 'ui/report/layout';
+import feedbackTpl from 'ui/report/feedback';
+
+var _defaults = {
+    showDetailsButton: true,
+    actions: []
+};
+
+/**
+ * Array of authorized report types
+ * @type {Array}
+ */
+var authorizedTypes = ['success', 'info', 'warning', 'error'];
+
+/**
+ * Recursive function to render report messages
+ *
+ * @private
+ * @param {Object} data - a standard report object sent by the backend
+ * @param {String} data.type - the error type
+ * @param {String} data.message - the feedback message
+ * @param {Array} [data.children] - children report object
+ * @param {Array} [actions] - the actions buttons to be added, only for the first level of the hierarchy
+ * @returns {*}
+ */
+var _renderFeebacks = function _renderFeebacks(data, actions) {
+    var children = [];
+    if (!data.type || authorizedTypes.indexOf(data.type) === -1) {
+        throw new TypeError('Unkown report type: ' + data.type);
+    }
+    if (_.isArray(data.children) && data.children.length) {
+        _.each(data.children, function(child) {
+            children.push(_renderFeebacks(child));
+        });
+    }
+    data.hasChildren = children.length > 0;
+    data.children = children;
+    data.actions = actions;
+    return feedbackTpl(data);
+};
+
+var report = {
+    /**
+     * Check if the details of the report are currently visible
+     * @returns {Boolean}
+     */
+    isDetailed: function isDetailed() {
+        return this.is('detailed');
+    },
+    /**
+     * Show the report details
+     *
+     * @returns {this}
+     * @fires reportComponent#showDetails
+     */
+    showDetails: function showDetails() {
+        if (this.is('rendered')) {
+            this.setState('detailed', true);
+            this.getElement()
+                .find('.fold input')
+                .prop('checked', true);
+            this.trigger('showDetails');
+        }
+        return this;
+    },
+    /**
+     * Hide the report details
+     *
+     * @returns {this}
+     * @fires reportComponent#hideDetails
+     */
+    hideDetails: function hideDetails() {
+        if (this.is('rendered')) {
+            this.setState('detailed');
+            this.getElement()
+                .find('.fold input')
+                .prop('checked', false);
+            this.trigger('hideDetails');
+        }
+        return this;
+    }
+};
+
+/**
+ * Create a simple report component
+ *
+ * @param {Object} config
+ * @param {Boolean} [config.showDetailsButton=true] - display the show/hide details toggle
+ * @param {Array} [config.actions] - possibility to add more button controls
+ * @param {Object} data - a standard report object
+ * @param {String} data.type - the type of the report
+ * @param {String} data.message - the message to be included in the report body (html allowed)
+ * @param {Array} [data.children] - children report object
+ * @returns {reportComponent}
+ */
+var reportComponentFactory = function reportComponentFactory(config, data) {
+    var initConfig = _.defaults(config || {}, _defaults);
+
+    if (data && _.isArray(data.children) && data.children.length) {
+        initConfig.detailsButtonVisible = initConfig.showDetailsButton;
+    }
+
+    /**
+     * THe report component
+     * @typedef reportComponent
+     * @fires reportComponent#action
+     * @fires reportComponent#action-{custom action name}
+     */
+    return component(report)
+        .setTemplate(layoutTpl)
+        .on('render', function() {
+            var self = this;
+            var $content = this.getElement().find('.content');
+            var $checkbox = this.getElement().find('.fold input');
+            $content.append(_renderFeebacks(_.cloneDeep(data), this.config.actions));
+
+            //init actions:
+            $content.on('click', '.action', function() {
+                var actionId = $(this).data('trigger');
+                self.trigger('action-' + actionId);
+                self.trigger('action', actionId);
+            });
+
+            //ensure multiple fast clicks only activate the toggle once
+            $checkbox.on(
+                'change',
+                _.throttle(function() {
+                    if (self.isDetailed()) {
+                        self.hideDetails();
+                    } else {
+                        self.showDetails();
+                    }
+                }, 100)
+            );
+        })
+        .init(initConfig);
+};
+
+export default reportComponentFactory;

package/src/resource/css/selector.css

@@ -1,9 +1,9 @@
-/*
-Usage:
-- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
-   if 3 colors used then the position of each will be 33,33%
-- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
-   first param - color, second - position. Also you can use px or other valid units for set position.
+/*
+Usage:
+- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
+   if 3 colors used then the position of each will be 33,33%
+- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
+   first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
@@ -646,5 +646,5 @@ Usage:
     text-align: center;
     padding: 5px;
 }
-
+
 /*# sourceMappingURL=selector.css.map */