@oat-sa/tao-core-ui 1.60.2 → 1.62.0

package/dist/propertySelector/css/propertySelector.css

@@ -0,0 +1,74 @@
+/*
+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 */
+.property-selector-container {
+    background-color: white;
+    border: 1px solid #dddfe2;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
+    display: flex;
+    z-index: 1;
+    flex-direction: column;
+    width: 35rem;
+    position: absolute;
+}
+
+.property-selector-container .search-property {
+    flex: 0 0 auto;
+    max-width: none;
+    height: 3.25rem;
+    margin: 0.5rem;
+}
+
+.property-selector-container .property-list-container {
+    flex: 0 1 100%;
+    overflow-y: scroll;
+    border-bottom: 1px solid #dddfe2;
+    padding: 0.5rem 0;
+    margin: 0;
+}
+
+.property-selector-container .property-list-container .property-description-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 1rem 0;
+    gap: 1rem;
+}
+
+.property-selector-container .property-list-container .property-description-container .property-description {
+    padding-right: 0;
+}
+
+.property-selector-container .property-list-container .property-description-container .property-description-checkbox {
+    padding-right: 4px;
+}
+
+.property-selector-container .property-list-container .property-description-container .property-description-class {
+    color: #737373;
+}
+
+.property-selector-container .control-buttons-container {
+    display: flex;
+    flex: 0 0 4.75rem;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem;
+}
+
+.property-selector-container .control-buttons-container button {
+    flex-grow: 1;
+    text-align: center;
+}
+
+.property-selector-container .control-buttons-container button span.label {
+    display: inline-block;
+}
+
+/*# sourceMappingURL=propertySelector.css.map */

package/dist/propertySelector/css/propertySelector.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/propertySelector.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"AAaA;;;;;;CCPC;AD2QD,oEAAA;AEjRA,gBAAA;ADEA;IACI,uBD4MqC;IC3MrC,yBEsBsB;IFrBtB,2CEmB6B;IFlB7B,aAAa;IACb,UAAU;IAEV,sBAAsB;IACtB,YAAY;IACZ,kBAAkB;AAOtB;;AAhBA;IAYQ,cAAc;IACd,eAAe;IACf,eAAe;IACf,cAAc;AAQtB;;AAvBA;IAmBQ,cAAc;IACd,kBAAkB;IAClB,gCEGkB;IFFlB,iBAAiB;IACjB,SAAS;AAQjB;;AA/BA;IA0BY,aAAa;IACb,mBAAmB;IACnB,uBAAuB;IACvB,eAAe;IACf,SAAS;AASrB;;AAvCA;IAiCgB,gBAAgB;AAUhC;;AA3CA;IAqCgB,kBAAkB;AAUlC;;AA/CA;IAyCgB,cEpBO;AF8BvB;;AAnDA;IA+CQ,aAAa;IACb,iBAAiB;IACjB,8BAA8B;IAC9B,mBAAmB;IACnB,SAAS;IACT,eAAe;AAQvB;;AA5DA;IAuDY,YAAY;IACZ,kBAAkB;AAS9B;;AAjEA;IA2DgB,qBAAqB;AAUrC","file":"propertySelector.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: 100 / ($count - 1);\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient( #{$css} );\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-left: $marginPercent;\n    width: $spanPercent;\n}\n\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    }\n    @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        }\n        @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    }\n    @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n  -webkit-border-top-left-radius: $radius * 1px;\n  -moz-border-radius-topleft: $radius * 1px;\n  border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n  -webkit-border-top-right-radius: $radius * 1px;\n  -moz-border-radius-topright: $radius * 1px;\n  border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n  -webkit-border-bottom-right-radius: $radius * 1px;\n  -moz-border-radius-bottomright: $radius * 1px;\n  border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return ($colWidth * 100 / $context) * 1%\n}\n\n@function remDist($fontSizePx) {\n    @return ($fontSizePx / 10) * 1rem\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha))\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha))\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: ($remPx) * 1px !important;\n        font-size: ($remPx / 10) * 1rem !important;\n    }\n    @else {\n        font-size: ($remPx) * 1px;\n        font-size: ($remPx / 10) * 1rem;\n    }\n}\n\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} { @content };\n    @-moz-keyframes #{$name} { @content };\n    @-webkit-keyframes #{$name} { @content };\n    @keyframes #{$name} { @content };\n}\n\n\n@mixin animation($value, $type:'') {\n    $animation: animation;\n    @if $type != '' {\n        $animation:  $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s){\n\n    @include keyframes(fade) {\n        0%   {opacity:0;}\n        50%   {opacity:1;}\n        100% {opacity:0;}\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat(){\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n","@import 'inc/bootstrap';\n\n.property-selector-container {\n    background-color: $uiGeneralContentBg;\n    border: 1px solid $modalBorderColor;\n    box-shadow: 0px 4px 8px $shadowColor;\n    display: flex;\n    z-index: 1;\n\n    flex-direction: column;\n    width: 35rem;\n    position: absolute;\n\n    .search-property {\n        flex: 0 0 auto;\n        max-width: none;\n        height: 3.25rem;\n        margin: 0.5rem;\n    }\n\n    .property-list-container {\n        flex: 0 1 100%;\n        overflow-y: scroll;\n        border-bottom: 1px solid $modalBorderColor;\n        padding: 0.5rem 0;\n        margin: 0;\n\n        .property-description-container {\n            display: flex;\n            flex-direction: row;\n            align-items: flex-start;\n            padding: 1rem 0;\n            gap: 1rem;\n\n            .property-description {\n                padding-right: 0;\n            }\n\n            .property-description-checkbox {\n                padding-right: 4px;\n            }\n\n            .property-description-class {\n                color: $textSecondary;\n            }\n        }\n    }\n\n    .control-buttons-container {\n        display: flex;\n        flex: 0 0 4.75rem;\n        justify-content: space-between;\n        align-items: center;\n        gap: 1rem;\n        padding: 0.5rem;\n\n        button {\n            flex-grow: 1;\n            text-align: center;\n\n            span.label {\n                display: inline-block;\n            }\n        }\n    }\n}\n\n/*# sourceMappingURL=propertySelector.css.map */","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-copy { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}

package/dist/propertySelector/propertySelector.js

@@ -0,0 +1,489 @@
+define(['ui/component', 'handlebars', 'i18n', 'lodash', 'lib/dompurify/purify', 'ui/button', 'css!ui/propertySelector/css/propertySelector.css', 'jquery'], function (component, Handlebars, __, _, DOMPurify, buttonFactory, propertySelector_css, $$1) { 'use strict';
+
+    component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
+    Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
+    __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
+    _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
+    DOMPurify = DOMPurify && Object.prototype.hasOwnProperty.call(DOMPurify, 'default') ? DOMPurify['default'] : DOMPurify;
+    buttonFactory = buttonFactory && Object.prototype.hasOwnProperty.call(buttonFactory, 'default') ? buttonFactory['default'] : buttonFactory;
+    $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
+
+    /**
+     * 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) 2013-2019 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
+     *
+     *
+     */
+    function Helpers0 (hb) {
+      //register a i18n helper
+      hb.registerHelper('__', function (key) {
+        return __(key);
+      });
+
+      /**
+       * Register dompurify helper
+       *
+       * https://github.com/cure53/DOMPurify
+       * with config SAFE_FOR_TEMPLATES: true
+       * to make output safe for template systems
+       */
+      hb.registerHelper('dompurify', function (context) {
+        return DOMPurify.sanitize(context);
+      });
+
+      /**
+       * Register join helper
+       *
+       * Example :
+       * var values = {a:v1, b:v2, c:v3};
+       * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
+       * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
+       */
+      hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
+        var fragments = [];
+        keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
+        fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
+        wrapper = typeof wrapper === 'string' ? wrapper : '"';
+        _.forIn(arr, function (value, key) {
+          var fragment = '';
+          if (value !== null || value !== undefined) {
+            if (typeof value === 'boolean') {
+              value = value ? 'true' : 'false';
+            } else if (typeof value === 'object') {
+              value = _.values(value).join(' ');
+            }
+          } else {
+            value = '';
+          }
+          if (keyValueGlue !== undefined) {
+            fragment += key + keyValueGlue;
+          }
+          fragment += wrapper + value + wrapper;
+          fragments.push(fragment);
+        });
+        return fragments.join(fragmentGlue);
+      });
+
+      //register a classic "for loop" helper
+      //it also adds a local variable "i" as the index in each iteration loop
+      hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
+        var ret = '';
+        startIndex = parseInt(startIndex);
+        stopIndex = parseInt(stopIndex);
+        increment = parseInt(increment);
+        for (var i = startIndex; i < stopIndex; i += increment) {
+          ret += options.fn(_.extend({}, this, {
+            i: i
+          }));
+        }
+        return ret;
+      });
+      hb.registerHelper('equal', function (var1, var2, options) {
+        if (var1 == var2) {
+          return options.fn(this);
+        } else {
+          return options.inverse(this);
+        }
+      });
+
+      // register a "get property" helper
+      // it gets the named property from the provided context
+      hb.registerHelper('property', function (name, context) {
+        return context[name] || '';
+      });
+
+      // register an 'includes' helper
+      // it checks if value is in array
+      hb.registerHelper('includes', function (haystack, needle, options) {
+        if (_.contains(haystack, needle)) {
+          return options.fn(this);
+        }
+      });
+    }
+
+    if (!Helpers0.__initialized) {
+      Helpers0(Handlebars);
+      Helpers0.__initialized = true;
+    }
+    var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+      this.compilerInfo = [4,'>= 1.0.0'];
+    helpers = this.merge(helpers, Handlebars.helpers);  
+
+
+      return "<div class=\"property-selector-container\">\n    <input type=\"text\" class=\"search-property\"/>\n    <ol class=\"property-list-container\">\n    </ol>\n    <div class=\"control-buttons-container\">\n    </div>\n</div>";
+      });
+    function propertySelectorTpl(data, options, asString) {
+      var html = Template(data, options);
+      return (asString || true) ? html : $(html);
+    }
+
+    if (!Helpers0.__initialized) {
+      Helpers0(Handlebars);
+      Helpers0.__initialized = true;
+    }
+    var Template$1 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+      this.compilerInfo = [4,'>= 1.0.0'];
+    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+      var buffer = "", stack1, helper, options, helperMissing=helpers.helperMissing, functionType="function", escapeExpression=this.escapeExpression, self=this;
+
+    function program1(depth0,data) {
+      
+      
+      return "checked";
+      }
+
+    function program3(depth0,data) {
+      
+      var buffer = "", stack1, helper, options;
+      buffer += "<span class=\"property-description-alias\">(";
+      stack1 = (helper = helpers.dompurify || (depth0 && depth0.dompurify),options={hash:{},data:data},helper ? helper.call(depth0, (depth0 && depth0.alias), options) : helperMissing.call(depth0, "dompurify", (depth0 && depth0.alias), options));
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += ")</span>";
+      return buffer;
+      }
+
+    function program5(depth0,data) {
+      
+      var buffer = "", stack1, helper, options;
+      buffer += "<span class=\"property-description-class\">/ ";
+      stack1 = (helper = helpers.dompurify || (depth0 && depth0.dompurify),options={hash:{},data:data},helper ? helper.call(depth0, (depth0 && depth0.classLabel), options) : helperMissing.call(depth0, "dompurify", (depth0 && depth0.classLabel), options));
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "</span>";
+      return buffer;
+      }
+
+      buffer += "<li class=\"property-description-container\">\n    <label class=\"property-description\">\n        <span class=\"property-description-checkbox\">\n            <input type=\"checkbox\" data-property-id=\"";
+      if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "\" ";
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.selected), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += " />\n            <span class=\"icon-checkbox\"></span>\n        </span>\n        <span class=\"property-description-label\">\n            ";
+      stack1 = (helper = helpers.dompurify || (depth0 && depth0.dompurify),options={hash:{},data:data},helper ? helper.call(depth0, (depth0 && depth0.label), options) : helperMissing.call(depth0, "dompurify", (depth0 && depth0.label), options));
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "\n            ";
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.alias), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "\n            ";
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.classLabel), {hash:{},inverse:self.noop,fn:self.program(5, program5, data),data:data});
+      if(stack1 || stack1 === 0) { buffer += stack1; }
+      buffer += "\n        </span>\n    </label>\n</li>";
+      return buffer;
+      });
+    function propertyDescriptionTpl(data, options, asString) {
+      var html = Template$1(data, options);
+      return (asString || true) ? html : $(html);
+    }
+
+    if (!Helpers0.__initialized) {
+      Helpers0(Handlebars);
+      Helpers0.__initialized = true;
+    }
+    var Template$2 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+      this.compilerInfo = [4,'>= 1.0.0'];
+    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+      var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression;
+
+
+      buffer += "<b>";
+      if (helper = helpers.text) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.text); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "</b>";
+      return buffer;
+      });
+    function highlightedTextTpl(data, options, asString) {
+      var html = Template$2(data, options);
+      return (asString || true) ? html : $(html);
+    }
+
+    /**
+     * 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) 2022 (original work) Open Assessment Technologies SA ;
+     */
+
+    /**
+     * A list of fields in which we can search a term.
+     * @type {string[]}
+     * @private
+     */
+    const searchableFields = ['label', 'alias', 'classLabel'];
+
+    /**
+     * Sort an array by a particular property.
+     * @param {Array} iter - The array to sort.
+     * @param {string} prop - The name of the sorting property.
+     * @returns {Array} - Returns a sorted copy of the array.
+     * @private
+     */
+    function sortBy(iter, prop) {
+      return Array.from(iter).sort((a, b) => {
+        const textA = a && a[prop] || '';
+        const textB = b && b[prop] || '';
+        return textA.localeCompare(textB);
+      });
+    }
+
+    /**
+     * Creates a property selector with respect to given options.
+     * @param {object} [config]
+     * @returns {*}
+     */
+    function propertySelectorFactory(config) {
+      //element references
+      let $container;
+      let $buttonsContainer;
+      let $propertyListContainer;
+      let $searchInput;
+      let availableProperties = [];
+      let selectedProperties;
+      let search = '';
+      let searchRedrawTimeoutId;
+      const parentGap = 20;
+      const searchRedrawTimeout = 500;
+      const instance = component({
+        /**
+         * Updates the list
+         */
+        redrawList() {
+          $propertyListContainer.empty();
+          const propertiesToRender = [];
+          availableProperties.forEach(property => {
+            property.selected = selectedProperties.has(property.id);
+            if (search === '' || includeSearch(property, search)) {
+              propertiesToRender.push(createPropertyOption(property, search));
+            }
+          });
+          $propertyListContainer.append(propertiesToRender);
+          this.trigger('redraw');
+        },
+        /**
+         * @typedef propertySelectorPosition
+         * @property {number} top top position of container element from parent
+         * @property {number} right right position of container element from parent
+         * @property {number} bottom bottom position of container element from parent
+         * @property {number} left left position of container element from parent
+         */
+        /**
+         * @typedef propertyDescription
+         * @property {string} id id of property
+         * @property {string} label label of the property
+         * @property {string} alias alias of the property
+         * @property {string} classLabel label of the property class
+         */
+        /**
+         * @typedef propertySelectorData
+         * @property {propertySelectorPosition} position position of the property selector modal top, right, bottom, left
+         * @property {Array<string>} selected array of selected property id
+         * @property {Array<propertyDescription>} available array of available proprty descriptions
+         */
+        /**
+         * Sets data
+         * @param {propertySelectorData} data
+         */
+        setData(data) {
+          if (data.available) {
+            availableProperties = sortBy(data.available, 'label');
+          }
+          selectedProperties = new Set(data.selected);
+          this.redrawList();
+        },
+        toggle() {
+          if (this.shown) {
+            this.hide();
+          } else {
+            this.show();
+            this.redrawList();
+          }
+        }
+      }).setTemplate(propertySelectorTpl).on('render', function () {
+        //component parts reference assignments
+        $container = instance.getElement();
+        $propertyListContainer = $$1('.property-list-container', $container);
+        $buttonsContainer = $$1('.control-buttons-container', $container);
+        $propertyListContainer.on('click', e => {
+          if (e.target.dataset.propertyId) {
+            if (e.target.checked) {
+              selectedProperties.add(e.target.dataset.propertyId);
+            } else {
+              selectedProperties.delete(e.target.dataset.propertyId);
+            }
+          }
+        });
+        positionContainer($container, this.config.data.position);
+        addButtons($buttonsContainer);
+        this.setData(this.config.data);
+
+        //search event setup
+        $searchInput = $$1('input.search-property', $container);
+        $searchInput.on('input', function () {
+          search = $$1(this).val();
+          if (searchRedrawTimeoutId) {
+            clearTimeout(searchRedrawTimeoutId);
+          }
+          searchRedrawTimeoutId = setTimeout(instance.redrawList, searchRedrawTimeout);
+        });
+        this.show();
+        this.trigger('ready');
+      }).on('destroy', unregisterPageClick).on('hide', function () {
+        this.shown = false;
+        unregisterPageClick();
+      }).on('show', function () {
+        registerPageClick();
+        this.shown = true;
+      }).on('cancel select', function () {
+        this.hide();
+        $searchInput.val('');
+        search = '';
+      });
+
+      /**
+       * Close the component when clicking outside.
+       * @param event
+       */
+      function pageClick(event) {
+        if ($$1(event.target).closest('.property-selector-container').length) {
+          return;
+        }
+        instance.trigger('cancel');
+      }
+
+      /**
+       * Listens to the clicks outside the component
+       */
+      function registerPageClick() {
+        setTimeout(() => document.addEventListener('click', pageClick), 0);
+      }
+
+      /**
+       * Stops listening to the clicks outside the component
+       */
+      function unregisterPageClick() {
+        setTimeout(() => document.removeEventListener('click', pageClick), 0);
+      }
+
+      /**
+       * Checks if a searchable field contains the searched term.
+       * @param {object} property
+       * @param {string} search
+       * @returns {boolean}
+       */
+      function includeSearch(property, search) {
+        const searchedTerm = search.toLowerCase();
+        return searchableFields.some(field => 'string' === typeof property[field] && property[field].toLowerCase().includes(searchedTerm));
+      }
+
+      /**
+       * Lookup for characters in text to highlight
+       * @param {String} text - text to lookup
+       * @param {String} searchString - match to be applied in the text
+       * @returns {String} - highlighted text
+       */
+      function highlightCharacter(text, searchString) {
+        const reg = new RegExp(searchString, 'gi');
+        return text.replace(reg, str => highlightedTextTpl({
+          text: str
+        }));
+      }
+
+      /**
+       * Creates property description list element
+       * @param {Object} property
+       * @returns JQuery element containing property description
+       */
+      function createPropertyOption(property, searchString) {
+        const descriptionData = Object.assign({}, property);
+        if (searchString !== '') {
+          searchableFields.forEach(field => {
+            if (descriptionData[field]) {
+              descriptionData[field] = highlightCharacter(descriptionData[field], searchString);
+            }
+          });
+        }
+        return $$1(propertyDescriptionTpl(descriptionData));
+      }
+
+      /**
+       * Adds buttons to container
+       * @param {jQuery} $targetContainer
+       */
+      function addButtons($targetContainer) {
+        const cancelButton = buttonFactory({
+          id: 'cancel',
+          label: 'Cancel',
+          type: 'info',
+          cls: 'btn-secondary'
+        }).on('click', () => instance.trigger('cancel'));
+        const saveButton = buttonFactory({
+          id: 'save',
+          label: 'Save',
+          type: 'info'
+        }).on('click', () => instance.trigger('select', [...selectedProperties]));
+        cancelButton.render($targetContainer);
+        saveButton.render($targetContainer);
+      }
+
+      /**
+       * Positions element inside parent
+       * @param {jQuery} $el element to apply positioning
+       * @param {Object} position object  { top, left, right, bottom } top OR bottom is required
+       */
+      function positionContainer($el, position) {
+        let {
+          top,
+          left,
+          right,
+          bottom
+        } = position;
+        let maxHeight;
+        if (typeof top === 'undefined' && typeof bottom === 'undefined') {
+          top = 0;
+          bottom = 0;
+          maxHeight = $el.parent().height();
+        } else if (typeof bottom === 'undefined') {
+          maxHeight = $el.parent().height() - top - parentGap;
+        } else if (typeof top === 'undefined') {
+          maxHeight = $el.parent().height() - bottom - parentGap;
+        }
+        $el.css({
+          top,
+          left,
+          right,
+          bottom,
+          maxHeight
+        });
+      }
+      setTimeout(() => instance.init(config), 0);
+      return instance;
+    }
+
+    return propertySelectorFactory;
+
+});