Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-04 08:50:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactoring

Browse Source
This commit is contained in:
barsdeveloper
2022-04-02 21:16:17 +02:00
parent 6ffdcbccab
commit 7d72015bb5
13 changed files with 115 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/ueb-style.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/ueb-style.css.map vendored
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,mBACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WClHR,SACI,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FACA,iBAGJ,kBACI,mBACA,4BACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBCvDJ,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,qBACA,sBACA,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,mBACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCpHR,SACI,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FACA,iBAGJ,kBACI,mBACA,4BACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBCvDJ,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}

88
dist/ueblueprint.js vendored
View File

@@ -803,9 +803,13 @@ class Configuration {
/**
* @typedef {import("../Blueprint").default} Blueprint
*/
/**
* @template {HTMLElement} T
*/
class IContext {
/** @type {HTMLElement} */
/** @type {T} */
#target
get target() {
return this.#target
@@ -821,7 +825,7 @@ class IContext {
options
/**
* @param {HTMLElement} target
* @param {T} target
* @param {Blueprint} blueprint
* @param {Object} options
*/
@@ -830,7 +834,7 @@ class IContext {
this.#blueprint = blueprint;
this.options = options;
this.options.listenOnFocus = this.options?.listenOnFocus ?? false;
this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? false;
this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? true;
let self = this;
this.listenHandler = _ => self.listenEvents();
this.unlistenHandler = _ => self.unlistenEvents();
@@ -1895,7 +1899,6 @@ class Copy extends IContext {
constructor(target, blueprint, options = {}) {
options.listenOnFocus = true;
options.unlistenOnTextEdit = true;
super(target, blueprint, options);
this.serializer = new ObjectSerializer();
let self = this;
@@ -2032,8 +2035,21 @@ class KeyboardCanc extends IKeyboardShortcut {
// @ts-check
/**
* @typedef {import("../../Blueprint").default} Blueprint
*/
/**
* @template {HTMLElement} T
* @extends {IContext<T>}
*/
class IPointing extends IContext {
/**
* @param {T} target
* @param {Blueprint} blueprint
* @param {Object} options
*/
constructor(target, blueprint, options) {
super(target, blueprint, options);
this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement;
@@ -2046,7 +2062,9 @@ class IPointing extends IContext {
return this.blueprint.compensateTranslation(
Utility.convertLocation(
[mouseEvent.clientX, mouseEvent.clientY],
this.movementSpace))
this.movementSpace
)
)
}
}
@@ -2561,8 +2579,14 @@ customElements.define(LinkElement.tagName, LinkElement);
// @ts-check
/**
* @typedef {import("../../Blueprint").default} Blueprint
*/
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
class IMouseClickDrag extends IPointing {
@@ -2582,6 +2606,11 @@ class IMouseClickDrag extends IPointing {
started = false
/**
* @param {T} target
* @param {Blueprint} blueprint
* @param {Object} options
*/
constructor(target, blueprint, options) {
super(target, blueprint, options);
this.clickButton = options?.clickButton ?? 0;
@@ -2800,21 +2829,21 @@ class MouseTracking extends IPointing {
// @ts-check
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
* @extends {IMouseClickDrag<ISelectableDraggableElement>}
*/
class MouseMoveNodes extends IMouseClickDrag {
/**
* @param {ISelectableDraggableElement} target
* @param {*} blueprint
* @param {*} options
* @param {Blueprint} blueprint
* @param {Object} options
*/
constructor(target, blueprint, options) {
super(target, blueprint, options);
this.stepSize = parseInt(options?.stepSize ?? this.blueprint.gridSize);
this.mouseLocation = [0, 0];
/** @type {ISelectableDraggableElement} */
this.target;
}
startDrag() {
@@ -3038,9 +3067,12 @@ customElements.define(LinkMessageElement.tagName, LinkMessageElement);
// @ts-check
/**
* @typedef {import("../../element/LinkElement").default} LinkElement
* @typedef {import("../../element/PinElement").default} PinElement
*/
/**
* @extends IMouseClickDrag<PinElement>
*/
class MouseCreateLink extends IMouseClickDrag {
/** @type {NodeListOf<PinElement>} */
@@ -3062,14 +3094,12 @@ class MouseCreateLink extends IMouseClickDrag {
constructor(target, blueprint, options) {
super(target, blueprint, options);
/** @type {PinElement} */
this.target;
let self = this;
this.#mouseenterHandler = e => {
if (!self.enteredPin) {
self.linkValid = false;
self.enteredPin = e.target;
self.enteredPin = /** @type {PinElement} */ (e.target);
const a = self.enteredPin, b = self.target;
if (a.getNodeElement() == b.getNodeElement()) {
this.setLinkMessage(LinkMessageElement.sameNode());
@@ -3099,7 +3129,7 @@ class MouseCreateLink extends IMouseClickDrag {
this.link = new LinkElement(this.target, null);
this.blueprint.nodesContainerElement.prepend(this.link);
this.setLinkMessage(LinkMessageElement.placeNode());
this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName);
this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin");
this.#listenedPins.forEach(pin => {
if (pin != this.target) {
pin.getClickableElement().addEventListener("mouseenter", this.#mouseenterHandler);
@@ -3158,20 +3188,20 @@ class PinTemplate extends ITemplate {
render(pin) {
if (pin.isInput()) {
return html`
<span class="ueb-pin-icon">
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</span>
<span class="ueb-pin-content">
</div>
<div class="ueb-pin-content">
<span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
${this.renderInput(pin)}
</span>
</div>
`
} else {
return html`
<span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
<span class="ueb-pin-icon">
<div class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</div>
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</span>
</div>
`
}
}
@@ -3205,7 +3235,7 @@ class PinTemplate extends ITemplate {
pin.dataset.advancedView = "true";
}
pin.clickableElement = pin;
window.customElements.whenDefined("ueb-node").then(pin.nodeElement = pin.closest("ueb-node"));
window.customElements.whenDefined("ueb-node").then(_ => pin.nodeElement = pin.closest("ueb-node"));
pin.getLinks().forEach(pinReference => {
const targetPin = pin.blueprint.getPin(pinReference);
if (targetPin) {
@@ -3275,12 +3305,15 @@ class StringPinTemplate extends PinTemplate {
*/
renderInput(pin) {
return html`
<span class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
<div class="ueb-pin-input">
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"
onfocus="this.closest('ueb-blueprint')?.dispatchEditTextEvent(true)"
onfocusout="this.closest('ueb-blueprint')?.dispatchEditTextEvent(false)"
></span>
</span>
onfocusout="
this.closest('ueb-blueprint')?.dispatchEditTextEvent(false)
document.getSelection().removeAllRanges()
"
></div>
</div>
`
}
}
@@ -3599,7 +3632,6 @@ class Paste extends IContext {
constructor(target, blueprint, options = {}) {
options.listenOnFocus = true;
options.unlistenOnTextEdit = true;
super(target, blueprint, options);
this.serializer = new ObjectSerializer();
let self = this;

10
js/input/IContext.js
View File

@@ -3,9 +3,13 @@
/**
* @typedef {import("../Blueprint").default} Blueprint
*/
/**
* @template {HTMLElement} T
*/
export default class IContext {
/** @type {HTMLElement} */
/** @type {T} */
#target
get target() {
return this.#target
@@ -21,7 +25,7 @@ export default class IContext {
options
/**
* @param {HTMLElement} target
* @param {T} target
* @param {Blueprint} blueprint
* @param {Object} options
*/
@@ -30,7 +34,7 @@ export default class IContext {
this.#blueprint = blueprint
this.options = options
this.options.listenOnFocus = this.options?.listenOnFocus ?? false
this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? false
this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? true
let self = this
this.listenHandler = _ => self.listenEvents()
this.unlistenHandler = _ => self.unlistenEvents()

1
js/input/common/Copy.js
View File

@@ -10,7 +10,6 @@ export default class Copy extends IContext {
constructor(target, blueprint, options = {}) {
options.listenOnFocus = true
options.unlistenOnTextEdit = true
super(target, blueprint, options)
this.serializer = new ObjectSerializer()
let self = this

1
js/input/common/Paste.js
View File

@@ -11,7 +11,6 @@ export default class Paste extends IContext {
constructor(target, blueprint, options = {}) {
options.listenOnFocus = true
options.unlistenOnTextEdit = true
super(target, blueprint, options)
this.serializer = new ObjectSerializer()
let self = this

6
js/input/mouse/IMouseClickDrag.js
View File

@@ -2,8 +2,14 @@
import IPointing from "./IPointing"
/**
* @typedef {import("../../Blueprint").default} Blueprint
*/
/**
* This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
* @template {HTMLElement} T
* @extends {IPointing<T>}
*/
export default class IMouseClickDrag extends IPointing {

12
js/input/mouse/IPointing.js
View File

@@ -3,6 +3,14 @@
import IContext from "../IContext"
import Utility from "../../Utility"
/**
* @typedef {import("../../Blueprint").default} Blueprint
*/
/**
* @template {HTMLElement} T
* @extends {IContext<T>}
*/
export default class IPointing extends IContext {
constructor(target, blueprint, options) {
@@ -17,6 +25,8 @@ export default class IPointing extends IContext {
return this.blueprint.compensateTranslation(
Utility.convertLocation(
[mouseEvent.clientX, mouseEvent.clientY],
this.movementSpace))
this.movementSpace
)
)
}
}

11
js/input/mouse/MouseCreateLink.js
View File

@@ -5,9 +5,12 @@ import LinkElement from "../../element/LinkElement"
import LinkMessageElement from "../../element/LinkMessageElement"
/**
* @typedef {import("../../element/LinkElement").default} LinkElement
* @typedef {import("../../element/PinElement").default} PinElement
*/
/**
* @extends IMouseClickDrag<PinElement>
*/
export default class MouseCreateLink extends IMouseClickDrag {
/** @type {NodeListOf<PinElement>} */
@@ -29,14 +32,12 @@ export default class MouseCreateLink extends IMouseClickDrag {
constructor(target, blueprint, options) {
super(target, blueprint, options)
/** @type {PinElement} */
this.target
let self = this
this.#mouseenterHandler = e => {
if (!self.enteredPin) {
self.linkValid = false
self.enteredPin = e.target
self.enteredPin = /** @type {PinElement} */ (e.target)
const a = self.enteredPin, b = self.target
if (a.getNodeElement() == b.getNodeElement()) {
this.setLinkMessage(LinkMessageElement.sameNode())
@@ -66,7 +67,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
this.link = new LinkElement(this.target, null)
this.blueprint.nodesContainerElement.prepend(this.link)
this.setLinkMessage(LinkMessageElement.placeNode())
this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName)
this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin")
this.#listenedPins.forEach(pin => {
if (pin != this.target) {
pin.getClickableElement().addEventListener("mouseenter", this.#mouseenterHandler)

12
js/input/mouse/MouseMoveNodes.js
View File

@@ -4,21 +4,19 @@ import IMouseClickDrag from "./IMouseClickDrag"
import Utility from "../../Utility"
/**
* @typedef {import("../../Blueprint").default} Blueprint
* @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/**
* @extends {IMouseClickDrag<ISelectableDraggableElement>}
*/
export default class MouseMoveNodes extends IMouseClickDrag {
/**
* @param {ISelectableDraggableElement} target
* @param {*} blueprint
* @param {*} options
*/
constructor(target, blueprint, options) {
super(target, blueprint, options)
this.stepSize = parseInt(options?.stepSize ?? this.blueprint.gridSize)
this.mouseLocation = [0, 0]
/** @type {ISelectableDraggableElement} */
this.target
}
startDrag() {

16
js/template/PinTemplate.js
View File

@@ -24,20 +24,20 @@ export default class PinTemplate extends ITemplate {
render(pin) {
if (pin.isInput()) {
return html`
<span class="ueb-pin-icon">
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</span>
<span class="ueb-pin-content">
</div>
<div class="ueb-pin-content">
<span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
${this.renderInput(pin)}
</span>
</div>
`
} else {
return html`
<span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
<span class="ueb-pin-icon">
<div class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</div>
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</span>
</div>
`
}
}
@@ -71,7 +71,7 @@ export default class PinTemplate extends ITemplate {
pin.dataset.advancedView = "true"
}
pin.clickableElement = pin
window.customElements.whenDefined("ueb-node").then(pin.nodeElement = pin.closest("ueb-node"))
window.customElements.whenDefined("ueb-node").then(_ => pin.nodeElement = pin.closest("ueb-node"))
pin.getLinks().forEach(pinReference => {
const targetPin = pin.blueprint.getPin(pinReference)
if (targetPin) {

14
js/template/StringPinTemplate.js
View File

@@ -16,14 +16,16 @@ export default class StringPinTemplate extends PinTemplate {
* @param {PinElement} pin
*/
renderInput(pin) {
const stopEventPropagation = "e => stopPropagation()"
return html`
<span class="ueb-pin-input">
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"
<div class="ueb-pin-input">
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"
onfocus="this.closest('ueb-blueprint')?.dispatchEditTextEvent(true)"
onfocusout="this.closest('ueb-blueprint')?.dispatchEditTextEvent(false)"
></span>
</span>
onfocusout="
this.closest('ueb-blueprint')?.dispatchEditTextEvent(false)
document.getSelection().removeAllRanges()
"
></div>
</div>
`
}
}

2
scss/ueb-pin.scss
View File

@@ -75,6 +75,8 @@ ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before {
}
.ueb-pin-input {
display: inline-block;
vertical-align: middle;
margin-left : 3px;
border : 1px solid #a0a0a0;
border-radius: 3px;