@hestia-earth/ui-components 0.0.7 → 0.0.10

package/tags-input/index.d.ts

@@ -0,0 +1,277 @@
+import Component from './utils/component';
+export default class BulmaTagsInput extends Component {
+    private _items;
+    private _selected;
+    private _isSelect;
+    private _isMultiple;
+    private _objectItems;
+    private _input;
+    private _manualInputAllowed;
+    private _filterInputAllowed;
+    private source;
+    private container;
+    private dropdown;
+    private dropdownEmptyOption;
+    constructor(element: any, options?: {});
+    /**
+     * Initiate all DOM element corresponding to selector
+     *
+     * @method
+     * @return Array of all Plugin instances
+     */
+    static attach(selector?: string, options?: {}, container?: any): any[];
+    /**
+     * Initiate plugin
+     *
+     * @method init
+     * @return
+     */
+    _init(): void;
+    /**
+     * Build TagsInput DOM elements
+     */
+    _build(): void;
+    /**
+     * Bind all events listener
+     */
+    _bindEvents(): void;
+    /**
+     * Check if caret is at the beginning of the input value
+     */
+    _caretAtStart(): boolean;
+    /**
+     * Check value length constraint if option activated
+     *
+     * @param item
+     */
+    _checkLength(item: any): boolean;
+    /**
+     * Close dropdown
+     */
+    _closeDropdown(): void;
+    /**
+     * Create a new dropdown item based on given item data
+     *
+     * @param item
+     */
+    _createDropdownItem(item: any): void;
+    /**
+     * Create a new tag and add it to the DOM
+     *
+     * @param string value
+     */
+    _createTag(item: any): void;
+    /**
+     * Remove all dropdown items except the empty title
+     */
+    _emptyDropdown(): void;
+    /**
+     * Find needle into a string and wrap it with <mark> HTML tag
+     *
+     * @param string
+     * @param needle
+     */
+    _highlightMatchesInString(string: any, needle: any): any;
+    /**
+     * Open dropdown
+     */
+    _openDropdown(): void;
+    /**
+     * Propagate internal input changes to the original input
+     */
+    _propagateChange(): void;
+    /**
+     * Trim value if option activated
+     *
+     * @param item
+     */
+    _trim(item: any): any;
+    /**
+     * Filter Dropdown items to be compliant with already selected items and current input value
+     * Filtering is made on Text by default (can be changed with option)
+     */
+    _filterDropdownItems(value?: any): boolean;
+    /**
+     * Update original select option based on given item
+     *
+     * @param item
+     */
+    _updateSelectOptions(item: any): void;
+    /**
+     * Add given item
+     * item = 'john'
+     * item = 'john,jane'
+     * item = ['john', 'jane']
+     * item = [{
+     *  "value": "1",
+     *  "text": "John"
+     * }, {
+     *  "value": "2",
+     *  "text": "Jane"
+     * }]
+     *
+     * @param item
+     * @param silently Should the change be propagated to the original element
+     */
+    add(items: any, silently?: boolean): this;
+    /**
+     * Unselect the selected item
+     */
+    clearSelection(): this;
+    /**
+     * Shortcut to removeAll method
+     */
+    flush(): this;
+    /**
+     * Sets focus on the input
+     */
+    focus(): this;
+    /**
+     * Check if given item is present
+     *
+     * @param item
+     */
+    has(item: any): boolean;
+    /**
+     * Check if given text is present
+     *
+     * @param value
+     */
+    hasText(value: any): boolean;
+    /**
+     * Check if given value is present
+     *
+     * @param value
+     */
+    hasValue(value: any): boolean;
+    /**
+     * Get index of given item
+     *
+     * @param item
+     */
+    indexOf(item: any): number;
+    /**
+     * Returns the internal input element
+     */
+    input(): any;
+    /**
+     * Get items
+     */
+    items(): any[];
+    /**
+     * Remove given item
+     * item = 'john'
+     * item = 'john,jane'
+     *
+     * @param String item
+     */
+    remove(items: any): this;
+    /**
+     * Remove all tags at once
+     */
+    removeAll(): this;
+    /**
+     * Remove item at given index
+     *
+     * @param Integer index
+     */
+    removeAtIndex(index: any, clearSelection?: boolean): this;
+    /**
+     * Select given item
+     *
+     * @param item
+     */
+    select(items: any): this;
+    /**
+     * Select tag at given index
+     *
+     * @param Integer index
+     */
+    selectAtIndex(index: any): this;
+    /**
+     * Get selected item
+     */
+    get selected(): any;
+    /**
+     * Get selected item index
+     */
+    get selectedIndex(): any;
+    /**
+     * Get value
+     */
+    get value(): string | any[];
+    /**
+     * Set value
+     */
+    set value(string: string | any[]);
+    /**
+     * Document click event handler
+     *
+     * @param e
+     */
+    _onDocumentClick(e: any): void;
+    /**
+     * Input focus lost event handler
+     *
+     * @param e
+     */
+    _onDropdownItemClick(e: any): void;
+    /**
+     * Input change event handler
+     *
+     * @param e
+     */
+    _onInputChange(e: any): void;
+    /**
+     * Input click event handler
+     *
+     * @param e
+     */
+    _onInputClick(e: any): void;
+    /**
+     * Input focus event handler
+     *
+     * @param e
+     */
+    _onInputFocusIn(e: any): boolean;
+    /**
+     * Input focus lost event handler
+     *
+     * @param e
+     */
+    _onInputFocusOut(e: any): void;
+    /**
+     * Input Keydown event handler
+     *
+     * @param e
+     */
+    _onInputKeyDown(e: any): void;
+    /**
+     * Input Keypress event handler
+     *
+     * @param e
+     */
+    _onInputKeyPress(e: any): boolean;
+    /**
+     * Original input change event handler
+     * CAUTION: because original input is now hidden the change event must be triggered manually on change
+     * Example how to trigger change event manually
+     * var changeEvent = new Event('change');
+     * input.dispatchEvent(changeEvent);
+     *
+     * @param e
+     */
+    _onOriginalInputChange(e: any): void;
+    /**
+     * Tag click event handler
+     *
+     * @param e
+     */
+    _onTagClick(e: any): boolean;
+    /**
+     * Delete tag button click event handler
+     *
+     * @param e
+     */
+    _onTagDeleteClick(e: any): boolean;
+}

package/tags-input/styles.sass

@@ -0,0 +1,154 @@
+@charset "utf-8"
+
+$tagsinput-selected-background-color: $primary !default
+$tagsinput-duplicate-animation: blinker .75s linear infinite !default
+
+.tags-input
+    @extend %input
+    align-content: flex-start
+    display: flex
+    flex-wrap: wrap
+    height: auto
+    min-height: auto
+    padding: 0
+    position: relative
+
+    .tag
+        font-size: $size-normal
+        margin: .1rem
+        &:hover
+            cursor: pointer
+        &.is-selected
+            background-color: $tagsinput-selected-background-color
+            color: findColorInvert($tagsinput-selected-background-color)
+
+        &.is-duplicate
+            animation: $tagsinput-duplicate-animation
+
+    .input
+        border-color: transparent
+        border: 0
+        box-shadow: none
+        display: inline-block
+        flex: 1 0 auto
+        height: initial
+        margin: initial
+        width: auto
+
+    &.is-filter
+        input
+            color: $input-placeholder-color
+
+            +placeholder
+                color: $input-placeholder-color
+    &.no-input
+        input
+            color: transparent
+            text-shadow: 0 0 0 $input-placeholder-color
+
+            +placeholder
+                color: $input-placeholder-color
+                text-shadow: none
+
+    .dropdown-menu
+        width: 100%
+
+        .dropdown-content
+            max-height: 250px
+            overflow: hidden
+            overflow-y: auto
+
+            &.is-loading
+                &::after
+                    @extend %loader
+                    left: 50%
+                    position: absolute !important
+                    top: 50%
+                    transform: translate(-50%, -50%)
+                    z-index: 4
+                &::before
+                    background-color: rgba($background, .5)
+                    content: ""
+                    height: 100%
+                    left: 0
+                    position: absolute
+                    top: 0
+                    width: 100%
+                    z-index: 3
+
+        .dropdown-item
+            &:not(.empty-title)
+                &:hover
+                    cursor: pointer
+
+            &.empty-title
+                color: $input-disabled-color
+                text-align: center
+
+                &:hover
+                    background: inherit
+                    color: $input-disabled-color
+
+            mark
+                &.is-highlighted
+                    background-color: $warning
+
+    &.is-small
+        .tag
+            font-size: $size-small
+        .input
+            +control-small
+    &.is-medium
+        .tag
+            font-size: $size-medium
+        .input
+            +control-medium
+    &.is-large
+        .tag
+            font-size: $size-large
+        .input
+            +control-large
+
+    &.is-disabled,
+    &[disabled]
+        background-color: $input-disabled-background-color
+        border-color: $input-disabled-border-color
+        box-shadow: none
+        color: $input-disabled-color
+        cursor: not-allowed
+
+        .tag
+            background-color: ligthen($input-disabled-background-color, 5%)
+            color: $input-disabled-color
+            cursor: not-allowed
+            .delete
+                background-color: darken($input-disabled-background-color, 5%)
+                border-color: darken($input-disabled-border-color, 5%)
+                box-shadow: none
+                color: $input-disabled-color
+                cursor: not-allowed
+
+        .input
+            background-color: $input-disabled-background-color
+            border-color: $input-disabled-border-color
+            box-shadow: none
+            color: $input-disabled-color
+
+            +placeholder
+                color: $input-disabled-placeholder-color
+
+    &[readonly]
+        .input
+            box-shadow: none
+
+    &.is-active
+        .dropdown-menu
+            display: block
+
+@keyframes blinker
+    0%
+        opacity: 1.0
+    50%
+        opacity: 0.0
+    100%
+        opacity: 1.0

package/tags-input/templates/dropdown-item.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (data: any) => string;
+export default _default;

package/tags-input/templates/tag.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (data: any) => string;
+export default _default;

package/tags-input/templates/wrapper.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (data: any) => string;
+export default _default;

package/tags-input/utils/component.d.ts

@@ -0,0 +1,22 @@
+import EventEmitter from './events';
+export default class Component extends EventEmitter {
+    protected element: any;
+    protected id: string;
+    protected options: any;
+    constructor(element: any, options?: {}, defaultOptions?: {});
+    /**
+     * Initiate all DOM element corresponding to selector
+     *
+     * @method
+     * @return Array of all Plugin instances
+     */
+    static attach(selector?: any, options?: {}, node?: any): any[];
+    /**
+     * Observe DOM mutations to automatically initialize plugin on new elements when added to the DOM
+     *
+     * @param selector
+     * @param options
+     */
+    static observeDom(selector: any, options: any): void;
+    static _interface(name?: any, options?: {}): any;
+}

package/tags-input/utils/dom.d.ts

@@ -0,0 +1,38 @@
+/**
+ * querySelector under steroid
+ * Can use as selector:
+ *  - function
+ *  - DOM Node
+ *  - String
+ *
+ * @param selector
+ * @param node
+ */
+export declare const querySelector: (selector: any, node: any) => any;
+/**
+ * querySelectorAll under steroid
+ * Can use as selector:
+ *  - function
+ *  - DOM Node
+ *  - String
+ *
+ * @param selector
+ * @param node
+ */
+export declare const querySelectorAll: (selector: any, node: any) => any;
+export declare const optionsFromDataset: (node: any, defaultOptions?: {}) => {};
+/**
+ * Copy HTML attributes from a source element to a target element
+ *
+ * @param target
+ * @param source
+ * @param except list of attributes to skip (separated by space)
+ */
+export declare const cloneAttributes: (target: any, source: any, except?: any) => void;
+/**
+ * Escapes string for insertion into HTML, replacing special characters with HTML
+ * entities.
+ *
+ * @param string
+ */
+export declare const escape: (string: any) => any;

package/tags-input/utils/events.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @class EventEmitter
+ *
+ * @property {Array} _listeners
+ */
+export default class EventEmitter {
+    private _listeners;
+    /**
+     * Construct EventEmitter
+     *
+     * @param listeners
+     */
+    constructor(listeners?: any[]);
+    /**
+     * Destroys EventEmitter
+     */
+    destroy(): void;
+    /**
+     * Count listeners registered for the provided eventName
+     *
+     * @param eventName
+     */
+    listenerCount(eventName: any): any;
+    /**
+     * Subscribes on event eventName specified function
+     *
+     * @param eventName
+     * @param listener
+     */
+    on(eventName: any, listener: any): void;
+    /**
+     * Subscribes on event name specified function to fire only once
+     *
+     * @param eventName
+     * @param listener
+     */
+    once(eventName: any, listener: any): void;
+    /**
+     * Removes event with specified eventName.
+     *
+     * @param eventName
+     */
+    off(eventName: any): void;
+    /**
+     * Emits event with specified name and params.
+     *
+     * @param eventName
+     * @param eventArgs
+     */
+    emit(eventName: any, ...eventArgs: any[]): any;
+    /**
+     * Register a new listener
+     *
+     * @param eventName
+     * @param listener
+     * @param once
+     */
+    _addListener(eventName: any, listener: any, once?: boolean): void;
+    /**
+     *
+     * @param eventName
+     */
+    _removeListeners(eventName?: any): void;
+    /**
+     * Applies arguments to specified event
+     *
+     * @param eventName
+     * @param eventArguments
+     * @protected
+     */
+    _applyEvents(eventName: any, eventArguments: any): any;
+}

package/tags-input/utils/type.d.ts

@@ -0,0 +1,17 @@
+export declare const isFunction: (unknown: any) => boolean;
+export declare const isString: (unknown: any) => boolean;
+export declare const isObject: (unknown: any) => boolean;
+export declare const isPromise: (value: any) => boolean;
+export declare const isNode: (unknown: any) => boolean;
+/**
+ * Convert String (false,False,True,true,no,yes,0,1) to real Boolean
+ *
+ * @param val
+ */
+export declare const BooleanParse: (val: any) => boolean;
+/**
+ * Check if given query selector is valid
+ *
+ * @param selector
+ */
+export declare const isSelectorValid: (selector: any) => boolean;

package/tags-input/utils/uuid.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (prefix?: string) => string;
+export default _default;

package/terms/terms.model.d.ts

@@ -1,6 +1,6 @@
 import { Term, ITermJSONLD, TermTermType } from '@hestia-earth/schema';
 export declare const termProperties: (term: Term | ITermJSONLD) => string[];
-export declare const findPropertyById: ({ defaultProperties }: Term | ITermJSONLD, key: keyof ITermJSONLD) => import("@hestia-earth/schema").Property | undefined;
+export declare const findPropertyById: ({ defaultProperties }: Term | ITermJSONLD, key: keyof ITermJSONLD) => import("@hestia-earth/schema").Property;
 export declare const termLocationName: ({ gadmFullName }: Term | ITermJSONLD) => {
     name: string;
 };