@deviceinsight/ng-ui-basic-components 7.3.0 → 7.5.0

package/dist/style.css

@@ -1 +1,244 @@
-.di.button *{vertical-align:middle}.di.button{height:32px;font-size:11px;font-weight:700;padding:0 15px;margin:0 4px 0 0;display:inline-block;color:#333;background-color:#fff;border-radius:3px;cursor:pointer;border:1px solid #ddd;border-bottom:1px solid #aaa}.di.button img{opacity:.8;margin:0}.di.button img+span{margin:0 0 0 8px}.di.button:hover{background-color:#00000012}.di.button:active,.di.button.active{background-color:#0000001a}.di.button.active{border:1px solid #333}.di.button.small{height:24px;margin:0 1px;padding:0 10px}.di.button.link{display:inline-block;border:none;background-color:transparent;box-shadow:none;cursor:pointer}.di.button.link:hover{text-decoration:none;background-color:#00000012;border-radius:3px}.di.button.link:active{background-color:#0000001a}.di.button.primary{background-color:var(--primary-color, #1a8ed3);border:none;color:#fff;border:1px solid var(--primary-color, #1a8ed3);border-bottom:1px solid var(--primary-color-darker, #1575ad)}.di.button.primary:hover,.di.button.primary:focus,.di.button.primary:active{background-color:var(--primary-color-darker, #1575ad);color:#fff}.di.button.danger{background-color:#ff494f;border:none;color:#fff;border:1px solid #FF494F;border-bottom:1px solid #E1494F}.di.button.danger:hover,.di.button.danger:focus,.di.button.danger:active{background-color:#e1494f;color:#fff}.di.button:disabled,.di.button.disabled{opacity:.35;cursor:default;pointer-events:none;filter:grayscale(100%)}.di.button::-moz-focus-inner{border:0;padding:0}.di.button-row{margin:30px 0 40px;display:flex}.di.button-row.dividing{padding:25px 0 0;border-top:1px solid #ddd}.di.button-row .button{min-width:70px}.di.modal{position:fixed;inset:0;background-color:#fff0;z-index:99999}.di.modal{transition:all .15s linear;pointer-events:none}.di.modal .modal-window{margin:7vh auto 0;border-radius:4px;background-color:#fff;box-shadow:0 5px 10px #0003;overflow:hidden}.di.modal .modal-window{transition:margin .3s ease-out .2s,opacity .3s ease-out .2s;opacity:0}.di.modal .modal-header{padding:20px 30px;min-height:60px;cursor:move;font-size:20px;line-height:25px;border-bottom:1px solid #ddd}.di.modal .modal-content{padding:20px 30px;max-height:calc(80vh - 100px);overflow:auto;clear:both}.di.modal .modal-footer{margin:0;text-align:right;padding:20px 30px;border-radius:0 0 4px 4px;border-top:1px solid #ddd}.di.modal.show{background-color:#00000080;pointer-events:auto}.di.modal.show .modal-window{margin:10vh auto 0;opacity:1}.di.spinner{border:2px solid #bababa;border-top:2px solid var(--primary-color, #1a8ed3);border-radius:50%;animation:spin 1s linear infinite;flex-shrink:0}.di.spinner-wrapper{position:relative;height:100%;z-index:0}.di.spinner-wrapper .spinner-container{opacity:0;transition:opacity .1s ease;background-color:#ffffffbf}.di.spinner-wrapper .spinner-container{position:absolute;inset:0;z-index:1;visibility:hidden}.di.spinner-wrapper .spinner-container.visible{opacity:1;visibility:visible}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.di.toggle{position:relative;display:inline-block;width:60px;height:30px}.di.toggle input{display:none}.di.toggle .switch{position:absolute;background-color:gray;border-radius:15px;cursor:pointer;inset:0}.di.toggle .switch:before{content:"";width:28px;height:28px;background-color:#fff;position:absolute;right:1px;top:1px;border-radius:14px}.di.toggle .switch,.di.toggle .switch:before{transition:transform .1s ease-out,background-color .05s ease-out .05s}.di.toggle input:checked+.switch:before{transform:translate(0)}.di.toggle input+.switch:before{transform:translate(-30px)}.di.toggle-small{width:40px;height:20px}.di.toggle .switch-small:before{width:18px;height:18px}.di.toggle input+.switch-small:before{transform:translate(-20px)}.di.checkbox{cursor:pointer}.di.checkbox>input:disabled+div,.di.toggle>input:disabled+div{opacity:.4;cursor:auto}.di.checkbox>input{display:none}.di.checkbox .box,.di.checkbox .radio{display:inline-block;text-align:left;width:16px;height:16px;border:1px solid black;vertical-align:middle}.di.checkbox .radio{border-radius:10px}.di.checkbox input:checked+.box:before{content:"✓";left:-1px;top:0;position:relative;float:right;font-size:14px;line-height:14px}.di.checkbox input:checked+.radio:before{content:"";display:block;position:relative;height:6px;width:6px;background-color:#222;border-radius:3px;top:4px;left:4px}.di .textlabel{-webkit-user-select:none;user-select:none;font-size:12px;vertical-align:middle;padding-left:5px}.di.label{height:22px;padding:0 10px;margin-right:6px;color:#333;border:1px solid #bbb;border-radius:20px;display:inline-flex;align-items:center;font-size:12px;white-space:nowrap}.di.label.removable{padding-right:0}.di.label .remove{margin:0 2px 0 8px;width:18px;height:18px;display:flex;justify-content:center;align-items:center}.di.label .remove{background-color:#0000004d;border-radius:50%;cursor:pointer}.di.label .remove:hover{background-color:#00000080}.di.label .remove:active{background-color:#000000b3}.di.label .remove img{flex-shrink:0}.di.label.danger{background-color:#e50000;border-color:transparent;color:#fff}.di.label.success{background-color:#00cc0a;border-color:transparent;color:#fff}.di.label.warning{background-color:#ffb400;border-color:transparent;color:#fff}.di.label.neutral{background-color:#ddd;border-color:transparent}.di.label.small{height:16px;font-size:11px}.di.label.small .remove{width:12px;height:12px}.di.label.small .remove img{width:10px}.di.label.large{height:30px}.di.label.large .remove{width:24px;height:24px}.di.label.clickable{cursor:pointer}a .di.label{text-decoration:solid inherit underline;font-weight:400}a .di.label:hover{background-color:#00000012;text-decoration:underline}a .di.label:active{background-color:#0000001a}.clearfix:after{content:"";clear:both;display:block;visibility:hidden;height:0px}.disabled{opacity:.35;pointer-events:none;cursor:default}.di.tabs{margin:5px 0 20px;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;align-items:center}.di.tabs .item{padding:12px 15px;margin-bottom:-1px;font-size:14px;text-decoration:none;border-bottom:2px solid transparent;color:#666;background:none;border-top:0;border-left:0;border-right:0;border-radius:0;cursor:pointer}.di.tabs .item:hover{background-color:#00000012}.di.tabs .item:active{background-color:#0000001a}.di.tabs .item.active,.dragging.item.active{font-weight:700;color:#333;border-bottom:2px solid var(--primary-color, #1a8ed3)}.di.tabs .item.disabled{opacity:.35;pointer-events:none;cursor:default}.di.tabs .item .add{background:url("data:image/svg+xml,%3csvg%20id='icon-add_24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpolygon%20id='plus'%20points='20%2010%2014%2010%2014%204%2010%204%2010%2010%204%2010%204%2014%2010%2014%2010%2020%2014%2020%2014%2014%2020%2014%2020%2010'/%3e%3c/svg%3e") no-repeat center;padding:0 25px;background-size:16px 16px}.dragging.item{padding:12px 15px;margin-bottom:-1px;font-size:14px;text-decoration:none;border-bottom:2px solid transparent;color:#666;background-color:#0000001a;border-top:0;border-left:0;border-right:0;border-radius:0;cursor:move;white-space:nowrap}.draggable-area *{cursor:move}.di.tabs .tab-header,.dragging .tab-header{position:relative}.di.tabs .tab-header:after,.dragging .tab-header:after{position:absolute;content:"";inset:0}.di.accordion{width:auto}.di.accordion .item{border-bottom:1px solid #bbb}.di.accordion .head{display:flex;align-items:center;justify-content:space-between;transition:.1s all ease}.di.accordion .head:hover{background-color:#00000012;transition-duration:0s}.di.accordion .head:before{content:"";position:absolute;display:inline-block;width:0;height:0;margin:0 0 0 3px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid black;pointer-events:none}.di.accordion .head:before{transition:.1s all ease}.di.accordion .title{width:100%;padding:15px 15px 15px 20px;display:flex;align-items:center;cursor:pointer}.di.accordion .title *{margin:initial}.di.accordion .title span{margin-right:10px}.di.accordion .tools{padding:0 0 0 15px;display:flex;align-items:center}.di.accordion .cont{height:0px;overflow:hidden;padding:0 0 0 25px;opacity:.3;transition:.25s all ease;transform:scaleY(.9);transform-origin:top left}.di.accordion .item.open .cont{height:auto;padding:15px 0 15px 25px;opacity:1;transform:scaleY(1)}.di.accordion .item.open .head:before{transform:rotate(90deg);transition:.3s ease}.di.accordion .item.open .head{border-bottom:1px dashed #eee}.di.accordion .accordion{background-color:#0000000d}.di.accordion h2{margin-top:0!important}.di.popup{min-width:40px;margin-top:-3px;z-index:1000;top:0;left:0;background-color:#fff;border:1px solid rgba(0,0,0,.2);box-shadow:0 1px 3px #0003;border-radius:3px;opacity:0}.di.popup{transition:opacity .1s ease,margin .1s ease}.di.popup-wrapper.hidden,.di.popup-wrapper.hidden>*{opacity:0!important;pointer-events:none}.di.popup-wrapper{transition:opacity .2s ease}.di.popup[class*=bottom],.di.popup[class*=top],.di.popup[class*=right],.di.popup[class*=left]{opacity:1}.di.popup .popup-arrow{width:10px;height:10px;margin:0;background-color:#fff;position:absolute;z-index:0;border:1px solid rgba(0,0,0,.2);border-right:none;border-bottom:none}.di.popup .popup-arrow[class*=bottom]{top:-8px}.di.popup .popup-arrow[class*=top]{bottom:-4px}.di.popup .popup-arrow[class*=left]{right:-5px}.di.popup .popup-arrow[class*=right]{left:-5px}.di.popup .popup-arrow[class*=bottom]:before{border-bottom:none;border-right:none;transform:rotate(45deg)}.di.popup .popup-arrow[class*=top]:before{border-bottom:none;border-right:none;transform:rotate(-135deg)}.di.popup .popup-arrow[class*=left]:before{border-bottom:none;border-right:none;transform:rotate(135deg)}.di.popup .popup-arrow[class*=right]:before{border-bottom:none;border-right:none;transform:rotate(-45deg)}.di.popup .popup-arrow,.di.popup .popup-arrow:before{position:absolute;width:8px;height:8px;background:inherit;border:1px solid rgba(0,0,0,.2)}.di.popup .popup-arrow{visibility:hidden}.di.popup .popup-arrow:before{visibility:visible;content:""}.di.popup .popup-content{margin:10px}.di.popup.inverted{background-color:#333;box-shadow:none}.di.popup.inverted .popup-arrow{background-color:#333;border:none}.di.popup.inverted .popup-content{color:#fff}.di.popup.inverted a{color:#fff;text-decoration:none;vertical-align:middle}.di.popup.inverted a:hover{text-decoration:underline}.di.popup.bubble .bubble-content{padding:5px;white-space:nowrap;display:inline-block}.di.popup.tooltip{transition:none;transition:opacity .1s ease}.di.popup.tooltip .tooltip-content{white-space:nowrap;display:inline-block;line-height:12px}.search-box{height:32px;padding:0 30px 0 0;border:1px solid #ccc;border-radius:5px;position:relative;background:#fff}.search-box input{width:100%;height:30px;padding:0 8px 0 15px;background:none;margin-top:0;border:none;outline:none;font-size:12px;box-shadow:none;border-radius:0}.search-box .di.button{position:absolute;right:0;margin-right:0;padding:7px 10px}
+/**
+* CS NG
+* UI Components
+*/
+
+/* Button */
+.di.button * {vertical-align:middle;}
+.di.button {height:32px; font-size:11px; font-weight:bold; padding:0 15px; margin:0 4px 0 0; display:inline-block; color:#333; background-color:#fff; border-radius:3px; cursor:pointer; border:1px solid #ddd; border-bottom:1px solid #aaa;}
+.di.button img {opacity:0.8; margin:0;}
+.di.button img + span {margin:0 0 0 8px;}
+.di.button:hover {background-color:rgba(0,0,0,0.07);}
+.di.button:active,
+.di.button.active {background-color:rgba(0,0,0,.1);}
+.di.button.active {border:1px solid #333;}
+.di.button.small {height:24px; margin: 0 1px; padding:0 10px;}
+.di.button.link {display:inline-block; border:none; background-color:transparent; box-shadow:none; cursor:pointer;}
+.di.button.link:hover {text-decoration: none; background-color:rgba(0,0,0,.07); border-radius:3px;}
+.di.button.link:active {background-color:rgba(0,0,0,.1);}
+.di.button.primary {background-color:var(--primary-color, #1a8ed3); border:none; color:#fff; border:1px solid var(--primary-color, #1a8ed3); border-bottom:1px solid var(--primary-color-darker, #1575ad);}
+.di.button.primary:hover,
+.di.button.primary:focus,
+.di.button.primary:active {background-color:var(--primary-color-darker, #1575ad); color:#fff}
+.di.button.danger {background-color:#FF494F; border:none; color:#fff; border:1px solid #FF494F; border-bottom:1px solid #E1494F;}
+.di.button.danger:hover,
+.di.button.danger:focus,
+.di.button.danger:active {background-color:#E1494F; color:#fff;}
+.di.button:disabled,
+.di.button.disabled {opacity:0.35; cursor:default; pointer-events:none; filter:grayscale(100%)}
+
+.di.button::-moz-focus-inner {border:0; padding:0;}
+
+/* ButtonRow */
+.di.button-row {margin:30px 0 40px; display:flex;}
+.di.button-row.dividing {padding:25px 0 0; border-top:1px solid #ddd;}
+.di.button-row .button {min-width:70px;}
+
+/* Modal */
+.di.modal {position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(255, 255, 255, 0); z-index: 99999; }
+.di.modal {transition:all .15s linear; pointer-events:none;}
+.di.modal .modal-window {margin:7vh auto 0; border-radius:4px; background-color: #fff; box-shadow:0 5px 10px rgba(0,0,0,0.2); overflow:hidden;}
+.di.modal .modal-window {transition:margin .3s ease-out .2s, opacity .3s ease-out .2s; opacity:0;}
+.di.modal .modal-header {padding:20px 30px; min-height:60px; cursor: move; font-size:20px; line-height:25px; border-bottom:1px solid #ddd;}
+.di.modal .modal-content {padding:20px 30px; max-height:calc(80vh - 100px); overflow:auto; clear:both;}
+.di.modal .modal-footer {margin:0px 0 0 0; text-align:right; padding:20px 30px; border-radius:0 0 4px 4px; border-top:1px solid #ddd;}
+
+.di.modal.show {background-color:rgba(0,0,0,0.5); pointer-events:auto;}
+.di.modal.show .modal-window {margin:10vh auto 0; opacity:1;}
+
+/* Spinner */
+.di.spinner {border: 2px solid #bababa; border-top: 2px solid var(--primary-color, #1a8ed3); border-radius:50%; animation: spin 1s linear infinite; flex-shrink:0;}
+.di.spinner-wrapper {position:relative; height:100%; z-index:0;}
+.di.spinner-wrapper .spinner-container {opacity:0; transition:opacity .1s ease; background-color:rgba(255,255,255,.75);}
+.di.spinner-wrapper .spinner-container {position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; visibility:hidden;}
+.di.spinner-wrapper .spinner-container.visible {opacity:1; visibility:visible;}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Checkbox */
+.di.toggle { position: relative; display: inline-block; width: 60px; height: 30px; }
+.di.toggle input { display: none; }
+.di.toggle .switch { position: absolute; background-color: grey; border-radius: 15px; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; }
+.di.toggle .switch:before { content: ''; width: 28px; height: 28px; background-color: white; position: absolute; right: 1px; top: 1px; border-radius: 14px;}
+.di.toggle .switch, .di.toggle .switch:before { transition: transform 0.1s ease-out, background-color 0.05s ease-out 0.05s; }
+.di.toggle input:checked + .switch:before { transform: translateX(0px); }
+.di.toggle input + .switch:before { transform: translateX(-30px); }
+
+.di.toggle-small { width: 40px; height: 20px; }
+.di.toggle .switch-small:before { width: 18px; height: 18px; }
+.di.toggle input + .switch-small:before { transform: translateX(-20px); }
+
+.di.checkbox { cursor: pointer; }
+.di.checkbox > input:disabled + div, .di.toggle > input:disabled + div { opacity: 0.4; cursor: auto; }
+.di.checkbox > input { display: none; }
+.di.checkbox .box, .di.checkbox .radio { display: inline-block; text-align: left; width: 16px; height: 16px; border: 1px solid black; vertical-align: middle; }
+.di.checkbox .radio { border-radius: 10px; }
+.di.checkbox input:checked + .box:before { content: '\2713'; /* checkbox tick */ left: -1px; top:0; position: relative; float: right; font-size: 14px; line-height: 14px; }
+.di.checkbox input:checked + .radio:before { content: ''; display: block; position: relative; height: 6px; width: 6px; background-color: #222; border-radius: 3px; top: 4px; left: 4px; }
+.di .textlabel { user-select: none; font-size: 12px; vertical-align: middle; padding-left: 5px; }
+
+/* Label */
+.di.label {height:22px; padding:0 10px; margin-right:6px; color: #333; border:1px solid #bbb; border-radius:20px; display:inline-flex; align-items:center; font-size:12px; white-space:nowrap;}
+
+.di.label.removable {padding-right:0}
+.di.label .remove {margin:0 2px 0 8px; width:18px; height:18px; display:flex; justify-content: center; align-items: center;}
+.di.label .remove {background-color:rgba(0,0,0,0.3); border-radius:50%; cursor:pointer;}
+.di.label .remove:hover {background-color:rgba(0,0,0,0.5);}
+.di.label .remove:active {background-color:rgba(0,0,0,0.7);}
+.di.label .remove img {flex-shrink:0;}
+
+.di.label.danger {background-color:#e50000; border-color:transparent; color:#fff;}
+.di.label.success {background-color:#00cc0a; border-color:transparent; color:#fff;}
+.di.label.warning {background-color:#ffb400; border-color:transparent; color: #fff;}
+.di.label.neutral {background-color:#ddd; border-color:transparent;}
+
+.di.label.small {height:16px; font-size:11px;}
+.di.label.small .remove {width:12px; height:12px;}
+.di.label.small .remove img {width:10px}
+.di.label.large {height:30px;}
+.di.label.large .remove {width:24px; height:24px;}
+
+.di.label.clickable {cursor:pointer;}
+
+a .di.label {text-decoration:solid inherit underline; font-weight:normal;}
+a .di.label:hover {background-color:rgba(0,0,0,.07); text-decoration:underline;}
+a .di.label:active {background-color:rgba(0,0,0,.1);}
+
+/* misc */
+.clearfix::after {content:""; clear:both; display:block; visibility:hidden; height:0px;}
+.disabled {opacity:0.35; pointer-events:none; cursor:default;}
+
+/* Tabs */
+.di.tabs {margin:5px 0 20px 0; border-bottom:1px solid #ddd; display:flex; flex-wrap:wrap; align-items:center;}
+.di.tabs .item {padding:12px 15px; margin-bottom:-1px; font-size:14px; text-decoration:none; border-bottom:2px solid transparent; color:#666; background:none; border-top:0; border-left:0; border-right:0; border-radius:0; cursor:pointer;}
+.di.tabs .item:hover {background-color:rgba(0, 0, 0, 0.07);}
+.di.tabs .item:active {background-color:rgba(0, 0, 0, 0.1);}
+.di.tabs .item.active, .dragging.item.active {font-weight:bold; color:#333; border-bottom:2px solid var(--primary-color, #1a8ed3); }
+.di.tabs .item.disabled {opacity:0.35; pointer-events:none; cursor:default;}
+.di.tabs .item .add {background:url("data:image/svg+xml,%3csvg%20id='icon-add_24_sga'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpolygon%20id='plus'%20points='20%2010%2014%2010%2014%204%2010%204%2010%2010%204%2010%204%2014%2010%2014%2010%2020%2014%2020%2014%2014%2020%2014%2020%2010'/%3e%3c/svg%3e") no-repeat center; padding:0 25px; background-size: 16px 16px;}
+.dragging.item {padding:12px 15px; margin-bottom:-1px; font-size:14px; text-decoration:none; border-bottom:2px solid transparent; color:#666; background-color:rgba(0, 0, 0, 0.1); border-top:0; border-left:0; border-right:0; border-radius:0; cursor: move; white-space: nowrap;}
+.draggable-area * { cursor: move;}
+.di.tabs .tab-header, .dragging .tab-header { position: relative;}
+.di.tabs .tab-header:after, .dragging .tab-header:after { position: absolute; content: ''; top: 0; bottom: 0; right: 0; left: 0; }
+
+/* Accordion */
+.di.accordion {width:auto;}
+.di.accordion .item {border-bottom:1px solid #bbb;}
+.di.accordion .head {display:flex; align-items:center; justify-content: space-between; transition:.1s all ease;}
+.di.accordion .head:hover {background-color:rgba(0,0,0,.07); transition-duration: 0s;}
+.di.accordion .head::before {content:''; position:absolute;display:inline-block; width:0; height:0; margin:0 0 0 3px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:4px solid black;pointer-events:none;}
+.di.accordion .head::before {transition:.1s all ease;}
+.di.accordion .title {width:100%; padding:15px 15px 15px 20px; display:flex; align-items:center; cursor:pointer;}
+.di.accordion .title * {margin:initial} /* h1, h2 etc. no IE11 */
+.di.accordion .title span {margin-right:10px;}
+.di.accordion .tools {padding:0 0 0 15px; display:flex; align-items:center;}
+.di.accordion .cont {height:0px; overflow:hidden; padding:0 0 0 25px; opacity:.3; transition:.25s all ease; transform:scaleY(.90); transform-origin: top left;}
+.di.accordion .item.open .cont {height:auto; padding:15px 0 15px 25px; opacity:1; transform:scaleY(1)}
+.di.accordion .item.open .head:before {transform:rotate(90deg); transition:.3s ease;}
+.di.accordion .item.open .head {border-bottom:1px dashed #eee;}
+.di.accordion .accordion {background-color:rgba(0,0,0,.05);} /* nested */
+.di.accordion h2 {margin-top:0px !important;}
+
+/* Popup */
+.di.popup {min-width:40px; margin-top:-3px; z-index:1000; top:0; left:0; background-color:#fff; border:1px solid rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,0.2); border-radius:3px; opacity:0}
+.di.popup {transition:opacity .1s ease, margin .1s ease;}
+.di.popup-wrapper.hidden, .di.popup-wrapper.hidden > * {opacity: 0 !important; pointer-events: none;}
+.di.popup-wrapper {transition: opacity 200ms ease;}
+
+.di.popup[class*='bottom'],
+.di.popup[class*='top'],
+.di.popup[class*='right'],
+.di.popup[class*='left'] {opacity:1;}
+
+.di.popup .popup-arrow {width:10px; height:10px; margin:0; background-color:#fff; position:absolute; z-index:0; border:1px solid rgba(0,0,0,0.2); border-right:none; border-bottom:none;}
+.di.popup .popup-arrow[class*='bottom'] {top: -8px;}
+.di.popup .popup-arrow[class*='top'] {bottom: -4px;}
+.di.popup .popup-arrow[class*='left'] {right: -5px;}
+.di.popup .popup-arrow[class*='right'] {left: -5px;}
+
+.di.popup .popup-arrow[class*='bottom']::before {
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(45deg);
+}
+
+.di.popup .popup-arrow[class*='top']::before {
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(-135deg);
+}
+
+.di.popup .popup-arrow[class*='left']::before {
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(135deg);
+}
+
+.di.popup .popup-arrow[class*='right']::before {
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(-45deg);
+}
+.di.popup .popup-arrow, .di.popup .popup-arrow::before {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    border: 1px solid rgba(0, 0, 0, 0.2)
+}
+
+.di.popup .popup-arrow {
+    visibility: hidden;
+}
+
+.di.popup .popup-arrow::before {
+     visibility: visible;
+     content: '';
+ }
+
+.di.popup .popup-content {margin:10px;}
+
+.di.popup.inverted {background-color:#333; box-shadow:none;}
+.di.popup.inverted .popup-arrow {background-color:#333; border:none;}
+.di.popup.inverted .popup-content {color:#fff;}
+.di.popup.inverted a {color:#fff; text-decoration:none; vertical-align:middle;}
+.di.popup.inverted a:hover {text-decoration:underline;}
+
+/* Bubble */
+.di.popup.bubble .bubble-content {padding:5px; white-space:nowrap; display:inline-block;}
+
+/* Tooltip */
+.di.popup.tooltip {transition:none; transition:opacity .1s ease;}
+.di.popup.tooltip .tooltip-content{white-space:nowrap; display:inline-block; line-height:12px;}
+
+.search-box {
+	height: 32px;
+	padding: 0 30px 0 0;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	position: relative;
+	background: #fff;
+}
+
+.search-box input {
+	width: 100%;
+	height: 30px;
+	padding: 0 8px 0 15px;
+	background: none;
+	margin-top: 0;
+	border: none;
+	outline: none;
+	font-size: 12px;
+	box-shadow: none;
+	border-radius: 0;
+}
+
+.search-box .di.button {
+	position: absolute;
+	right: 0;
+	margin-right: 0;
+	padding: 7px 10px;
+}

package/dist/types/components/popup/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../src/components/popup/Popup.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,MAAM,MAAM,SAAS,GAClB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,GACZ,aAAa,GACb,WAAW,GACX,YAAY,GACZ,UAAU,CAAC;AAEd,MAAM,MAAM,KAAK,GAAG;IACnB,kCAAkC;IAClC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4CAA4C;IAC5C,IAAI,EAAE,OAAO,CAAC;IAEd,oDAAoD;IACpD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC,qFAAqF;IACrF,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oGAAoG;IACpG,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC,4DAA4D;IAC5D,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;IAE1C,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAKF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC7B,SAAoB,EACpB,IAAgB,EAChB,QAAQ,EACR,OAAO,EACP,uBAAuB,EACvB,2BAA2B,EAC3B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,EAAE,KAAK,qBA2FP"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../src/components/popup/Popup.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,MAAM,MAAM,SAAS,GAClB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,GACZ,aAAa,GACb,WAAW,GACX,YAAY,GACZ,UAAU,CAAC;AAEd,MAAM,MAAM,KAAK,GAAG;IACnB,kCAAkC;IAClC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4CAA4C;IAC5C,IAAI,EAAE,OAAO,CAAC;IAEd,oDAAoD;IACpD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC,qFAAqF;IACrF,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oGAAoG;IACpG,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC,4DAA4D;IAC5D,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;IAE1C,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAKF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC7B,SAAoB,EACpB,IAAgB,EAChB,QAAQ,EACR,OAAO,EACP,uBAAuB,EACvB,2BAA2B,EAC3B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,EAAE,KAAK,qBAiGP"}

package/dist/types/components/popup/Popup.stories.d.ts

@@ -24,5 +24,6 @@ export declare const ClickAndFocusMode: Story;
 export declare const HoverMode: Story;
 export declare const PreventExtendingBeyondViewport: Story;
 export declare const AutoFlipAtViewportEdge: Story;
+export declare const PopupInsideModal: Story;
 export default meta;
 //# sourceMappingURL=Popup.stories.d.ts.map

package/dist/types/components/popup/Popup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/popup/Popup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAmBoB,CAAC;AAE/B,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAKzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAK5C,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAmCpC,CAAC;AAeF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Popup.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/popup/Popup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAmBoB,CAAC;AAE/B,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAKzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAK5C,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAmCpC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA+G9B,CAAC;AAeF,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@deviceinsight/ng-ui-basic-components",
-	"version": "7.3.0",
+	"version": "7.5.0",
 	"private": false,
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {