test-isc
Version:
An Ionic component similar to Ionic Select, that allows to search items, including async search, group, add, edit, delete items, and much more.
1,022 lines (1,021 loc) • 89.3 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import { r as registerInstance, d as createEvent, h, H as Host, e as getElement } from './index-b6f64b02.js';
import './ionic-global-5d790111.js';
import { i as IonicSelectableSelectedEvent, g as IonicSelectableChangedEvent, k as IonicSelectableOpenedEvent, j as IonicSelectableClosedEvent, f as IonicSelectableClearedEvent, e as IonicSelectableItemAddingEvent, b as IonicSelectableSearchingEvent, a as IonicSelectableInfiniteScrolledEvent, d as IonicSelectableSearchSuccessedEvent, c as IonicSelectableSearchFailedEvent } from './ionic-selectable.interfaces.component-e50cb548.js';
import './utils-a3067e86.js';
import { g as getMode } from './index-9fd7b36f.js';
import './helpers-4a6bd295.js';
import './animation-3124e2ad.js';
import './index-367b30bb.js';
import './ios.transition-6129ad9e.js';
import './md.transition-aa16e3db.js';
import './cubic-bezier-89113939.js';
import './index-9b41fcc6.js';
import './index-86d5f3ab.js';
import './hardware-back-button-b3b61715.js';
import './index-59323445.js';
import { m as modalController } from './overlays-40d1f8b3.js';
var findItemLabel = function (componentElement) {
var itemElement = componentElement.closest('ion-item');
if (itemElement) {
return itemElement.querySelector('ion-label');
}
return null;
};
var findItem = function (componentEl) {
var itemEl = componentEl.closest('ion-item');
return itemEl;
};
var addRippleEffectElement = function (componentElement) {
var itemElement = componentElement.closest('ion-item');
var itemNative = itemElement.shadowRoot.querySelector('div.item-native');
if (itemNative) {
var ionRipple = itemNative.ownerDocument.createElement('ion-ripple-effect');
itemNative.appendChild(ionRipple);
}
};
var hostContext = function (selector, element) {
return element.closest(selector) !== null;
};
var renderHiddenInput = function (always, container, name, value, disabled) {
if (always || hasShadowDom(container)) {
var input = container.querySelector('input.aux-input');
if (!input) {
input = container.ownerDocument.createElement('input');
input.type = 'hidden';
input.classList.add('aux-input');
container.appendChild(input);
}
input.disabled = disabled;
input.name = name;
input.value = value || '';
}
};
var hasShadowDom = function (element) {
return !!element.shadowRoot && !!element.attachShadow;
};
var ionicSelectableIosComponentCss = ":host{--font-family:var(--ion-font-family, inherit)}:host{--placeholder-color:currentColor;--placeholder-opacity:0.33;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;font-family:var(--font-family, inherit);overflow:hidden;z-index:var(--z-index-item-input)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.in-item){position:static;max-width:45%}:host(.ionic-selectable-is-disabled){opacity:0.4;pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}:host(.item-multiple-inputs){position:relative}:host(.item-label-stacked),:host(.item-label-floating){--padding-start:0;-ms-flex-item-align:stretch;align-self:stretch;width:100%;max-width:100%}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.ionic-selectable-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}.ionic-selectable-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ionic-selectable-icon{position:relative;opacity:0.33}.ionic-selectable-icon-inner{left:5px;top:50%;margin-top:-3px;position:absolute;width:0;height:0;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;color:currentColor;pointer-events:none}[dir=rtl] .ionic-selectable-icon-inner,:host-context([dir=rtl]) .ionic-selectable-icon-inner{left:unset;right:unset;right:5px}.ionic-selectable-icon-template{-ms-flex-item-align:center;align-self:center;margin-left:5px}:host{--padding-top:var(--item-ios-padding-top, 10px);--padding-end:10px;--padding-bottom:var(--item-ios-padding-bottom, 10px);--padding-start:var(--item-ios-padding-start, 20px)}:host(.item-label-stacked),:host(.item-label-floating){--padding-top:8px;--padding-bottom:8px;--padding-start:0}.ionic-selectable-icon{width:12px;height:18px}";
var ionicSelectableMdComponentCss = ":host{--font-family:var(--ion-font-family, inherit)}:host{--placeholder-color:currentColor;--placeholder-opacity:0.33;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;font-family:var(--font-family, inherit);overflow:hidden;z-index:var(--z-index-item-input)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.in-item){position:static;max-width:45%}:host(.ionic-selectable-is-disabled){opacity:0.4;pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}:host(.item-multiple-inputs){position:relative}:host(.item-label-stacked),:host(.item-label-floating){--padding-start:0;-ms-flex-item-align:stretch;align-self:stretch;width:100%;max-width:100%}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.ionic-selectable-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}.ionic-selectable-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ionic-selectable-icon{position:relative;opacity:0.33}.ionic-selectable-icon-inner{left:5px;top:50%;margin-top:-3px;position:absolute;width:0;height:0;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;color:currentColor;pointer-events:none}[dir=rtl] .ionic-selectable-icon-inner,:host-context([dir=rtl]) .ionic-selectable-icon-inner{left:unset;right:unset;right:5px}.ionic-selectable-icon-template{-ms-flex-item-align:center;align-self:center;margin-left:5px}:host{--padding-top:var(--item-md-padding-top, 10px);--padding-end:0;--padding-bottom:var(--item-md-padding-bottom, 11px);--padding-start:var(--item-md-padding-start, 16px)}:host(.item-label-stacked),:host(.item-label-floating){--padding-top:8px;--padding-bottom:8px;--padding-start:0}.ionic-selectable-icon{width:19px;height:19px}";
var IonicSelectableComponent = /** @class */ (function () {
function class_1(hostRef) {
var _this = this;
registerInstance(this, hostRef);
this.id = this.element.id ? this.element.id : "ionic-selectable-" + nextId++;
this.isInited = false;
this.isRendered = false;
this.isChangeInternal = false;
this.groups = [];
this.filteredGroups = [];
this.hasFilteredItems = false;
this.hasObjects = false;
this.hasGroups = false;
this.footerButtonsCount = 0;
this.isSearching = false;
this.isAddItemTemplateVisible = false;
this.isFooterVisible = true;
this.itemToAdd = null;
this.selectedItems = [];
this.valueItems = [];
this.itemsToConfirm = [];
/**
* Determines whether Modal is opened.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#isopened).
*
* @default false
* @readonly
* @memberof IonicSelectableComponent
*/
this.isOpened = false;
/**
* Determines whether the component is disabled.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#isdisabled).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.isDisabled = false;
/**
* Close button text.
* The field is only applicable to **iOS** platform, on **Android** only Cross icon is displayed.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#closebuttontext).
*
* @default 'Cancel'
* @memberof IonicSelectableComponent
*/
this.closeButtonText = 'Cancel';
/**
* Close button slot. [Ionic slots](https://ionicframework.com/docs/api/buttons) are supported.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#closebuttonslot).
*
* @default 'start'
* @memberof IonicSelectableComponent
*/
this.closeButtonSlot = 'start';
/**
* Item icon slot. [Ionic slots](https://ionicframework.com/docs/api/item) are supported.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#itemiconslot).
*
* @default 'start'
* @memberof IonicSelectableComponent
*/
this.itemIconSlot = 'start';
/**
* Confirm button text.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#confirmbuttontext).
*
* @default 'OK'
* @memberof IonicSelectableComponent
*/
this.confirmButtonText = 'OK';
/**
* Clear button text.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#clearbuttontext).
*
* @default 'Clear'
* @memberof IonicSelectableComponent
*/
this.clearButtonText = 'Clear';
/**
* Add button text.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#addbuttontext).
*
* @default 'Add'
* @memberof IonicSelectableComponent
*/
this.addButtonText = 'Add';
/**
* The name of the control, which is submitted with the form data.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#name).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.name = this.id;
/**
* Determines whether multiple items can be selected.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#ismultiple).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.isMultiple = false;
/**
* The value of the component.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#value).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.value = null;
/**
* Is set to true, the value will be extracted from the itemValueField of the objects.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#shouldStoreItemValue).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.shouldStoreItemValue = false;
/**
* A list of items.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#items).
*
* @default []
* @memberof IonicSelectableComponent
*/
this.items = [];
/**
* A list of items to disable.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#disableditems).
*
* @default []
* @memberof IonicSelectableComponent
*/
this.disabledItems = [];
/**
* Item property to use as a unique identifier, e.g, `'id'`.
* **Note**: `items` should be an object array.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#itemvaluefield).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.itemValueField = null;
/**
* Item property to display, e.g, `'name'`.
* **Note**: `items` should be an object array.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#itemtextfield).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.itemTextField = null;
/**
* Modal CSS class.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#modalcssclass).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.modalCssClass = null;
/**
* Modal enter animation.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#modalenteranimation).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.modalEnterAnimation = null;
/**
* Modal leave animation.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#modalleaveanimation).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.modalLeaveAnimation = null;
/**
* Text of [Ionic Label](https://ionicframework.com/docs/api/label).
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#label).
*
* @readonly
* @default null
* @memberof IonicSelectableComponent
*/
this.titleText = null;
/**
*
* Group property to use as a unique identifier to group items, e.g. `'country.id'`.
* **Note**: `items` should be an object array.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#groupvaluefield).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.groupValueField = null;
/**
* Group property to display, e.g. `'country.name'`.
* **Note**: `items` should be an object array.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#grouptextfield).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.groupTextField = null;
/**
* Determines whether Ionic [InfiniteScroll](https://ionicframework.com/docs/api/infinite-scroll) is enabled.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hasinfinitescroll).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.hasInfiniteScroll = false;
/**
* The threshold distance from the bottom of the content to call the infinite output event when scrolled.
* Use the value 100px when the scroll is within 100 pixels from the bottom of the page.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#infinite-scroll).
*
* @default '100px'
* @memberof IonicSelectableComponent
*/
this.infiniteScrollThreshold = '100px';
/**
* Determines whether Ionic [VirtualScroll](https://ionicframework.com/docs/api/virtual-scroll) is enabled.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hasvirtualscroll).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.hasVirtualScroll = false;
/**
* See Ionic VirtualScroll [approxHeaderHeight](https://ionicframework.com/docs/api/virtual-scroll).
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#virtualscrollheaderfn).
*
* @default 30
* @memberof IonicSelectableComponent
*/
this.virtualScrollApproxHeaderHeight = 30;
/**
* See Ionic VirtualScroll [approxItemHeight](https://ionicframework.com/docs/api/virtual-scroll).
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#virtualscrollheaderfn).
*
* @default 45
* @memberof IonicSelectableComponent
*/
this.virtualScrollApproxItemHeight = 45;
/**
* Determines whether Confirm button is visible for single selection.
* By default Confirm button is visible only for multiple selection.
* **Note**: It is always true for multiple selection and cannot be changed.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hasconfirmbutton).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.hasConfirmButton = false;
/**
* Determines whether to allow adding items.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#canadditem).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.canAddItem = false;
/**
* Determines whether to show Clear button.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#canclear).
* @default false
* @memberof IonicSelectableComponent
*/
// Pending - @HostBinding('class.ionic-selectable-can-clear')
this.canClear = false;
/**
* Determines whether to show [Searchbar](https://ionicframework.com/docs/api/searchbar).
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#cansearch).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.canSearch = false;
/**
* Determines the search is delegate to event, and not handled internally.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#cansearch).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.shouldDelegateSearchToEvent = false;
/**
* How long, in milliseconds, to wait to filter items or to trigger `onSearch` event after each keystroke.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#searchdebounce).
*
* @default 250
* @memberof IonicSelectableComponent
*/
this.searchDebounce = 250;
/**
* A placeholder for [Searchbar](https://ionicframework.com/docs/api/searchbar).
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#searchplaceholder).
*
* @default 'Search'
* @memberof IonicSelectableComponent
*/
this.searchPlaceholder = 'Search';
/**
* Text in [Searchbar](https://ionicframework.com/docs/api/searchbar).
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#searchtext).
*
* @default ''
* @memberof IonicSelectableComponent
*/
this.searchText = '';
/**
* Text to display when no items have been found during search.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#searchfailtext).
*
* @default 'No items found.'
* @memberof IonicSelectableComponent
*/
this.searchFailText = 'No items found.';
/**
* Determines whether Searchbar should receive focus when Modal is opened.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#shouldfocussearchbar).
*
* @default false
* @memberof IonicSelectableComponent
*/
this.shouldFocusSearchbar = false;
/**
* Set the cancel button icon of the [Searchbar](https://ionicframework.com/docs/api/searchbar).
* Only applies to md mode. Defaults to "arrow-back-sharp".
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hassearchtext).
*
* @default 'arrow-back-sharp'
* @memberof IonicSelectableComponent
*/
this.searchCancelButtonIcon = 'arrow-back-sharp';
/**
* Set the the cancel button text of the [Searchbar](https://ionicframework.com/docs/api/searchbar).
* Only applies to ios mode.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hassearchtext).
*
* @default 'Cancel'
* @memberof IonicSelectableComponent
*/
this.searchCancelButtonText = 'Cancel';
/**
* Set the clear icon of the [Searchbar](https://ionicframework.com/docs/api/searchbar).
* Defaults to "close-circle" for ios and "close-sharp" for md.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hassearchtext).
*
* @memberof IonicSelectableComponent
*/
this.searchClearIcon = getMode() === 'ios' ? 'close-circle' : 'close-sharp';
/**
* A hint to the browser for which keyboard to display.
* Possible values: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search".
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hassearchtext).
* @default 'none'
* @memberof IonicSelectableComponent
*/
this.searchInputmode = 'none';
/**
* The icon to use as the search icon in the [Searchbar](https://ionicframework.com/docs/api/searchbar).
* Defaults to "search-outline" in ios mode and "search-sharp" in md mode.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hassearchtext).
* @default 'none'
* @memberof IonicSelectableComponent
*/
this.searchIcon = getMode() === 'ios' ? 'search-outline' : 'search-sharp';
/**
* Sets the behavior for the cancel button of the [Searchbar](https://ionicframework.com/docs/api/searchbar).
* Defaults to "never".
* Setting to "focus" shows the cancel button on focus.
* Setting to "never" hides the cancel button.
* Setting to "always" shows the cancel button regardless of focus state.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hassearchtext).
* @default 'none'
* @memberof IonicSelectableComponent
*/
this.searchShowCancelButton = 'never';
/**
* Determines whether Confirm button is enabled.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#isconfirmbuttonenabled).
*
* @default true
* @memberof IonicSelectableComponent
*/
this.isConfirmButtonEnabled = true;
/**
* Header color. [Ionic colors](https://ionicframework.com/docs/theming/advanced#colors) are supported.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#headercolor).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.headerColor = null;
/**
* Group color. [Ionic colors](https://ionicframework.com/docs/theming/advanced#colors) are supported.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#groupcolor).
*
* @default null
* @memberof IonicSelectableComponent
*/
this.groupColor = null;
/**
* See Ionic VirtualScroll [headerFn](https://ionicframework.com/docs/api/virtual-scroll).
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#virtualscrollheaderfn).
*
* @memberof IonicSelectableComponent
*/
this.virtualScrollHeaderFn = function () { return null; };
this.onClick = function () { return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_c) {
this.setFocus();
this.open();
return [2 /*return*/];
});
}); };
this.onFocus = function () {
_this.focused.emit();
};
this.onBlur = function () {
_this.blurred.emit();
};
this.infiniteScrolled = createEvent(this, "infiniteScrolled", 7);
this.searching = createEvent(this, "searching", 7);
this.searchFailed = createEvent(this, "searchFailed", 7);
this.searchSuccessed = createEvent(this, "searchSuccessed", 7);
this.itemAdding = createEvent(this, "itemAdding", 7);
this.cleared = createEvent(this, "cleared", 7);
this.changed = createEvent(this, "changed", 7);
this.itemsChanged = createEvent(this, "itemsChanged", 7);
this.selected = createEvent(this, "selected", 7);
this.opened = createEvent(this, "opened", 7);
this.closed = createEvent(this, "closed", 7);
this.focused = createEvent(this, "focused", 7);
this.blurred = createEvent(this, "blurred", 7);
this.ionStyle = createEvent(this, "ionStyle", 7);
}
class_1.prototype.onShouldStoreItemValueChanged = function (value) {
if (!value && !this.hasObjects) {
throw new Error("If items contains primitive elements, shouldStoreItemValue must be null or true: " + this.element.id);
}
};
class_1.prototype.onItemValueFieldChanged = function (value) {
if (this.hasObjects && this.isNullOrWhiteSpace(value)) {
throw new Error("If items contains object elements, itemValueField must be non null or non whitespace : " + this.element.id);
}
else if (!this.hasObjects && !this.isNullOrWhiteSpace(value)) {
throw new Error("If items contains primitive elements, itemValueField must be null: " + this.element.id);
}
};
class_1.prototype.onItemTextFieldChanged = function (value) {
if (this.hasObjects && this.isNullOrWhiteSpace(value)) {
throw new Error("If items contains object elements, itemTextField must be non null or non whitespace : " + this.element.id);
}
else if (!this.hasObjects && !this.isNullOrWhiteSpace(value)) {
throw new Error("If items contains primitive elements, itemTextField must be null: " + this.element.id);
}
};
class_1.prototype.onItemsChanged = function (value) {
this.setItems(value);
};
class_1.prototype.onDisabledChanged = function () {
this.emitStyle();
};
class_1.prototype.onValueChanged = function (newValue) {
if (!this.isChangeInternal) {
this.emitStyle();
if (this.isInited) {
this.setValue(newValue, false);
}
}
this.isChangeInternal = false;
};
class_1.prototype.onSearchTextChanged = function (newValue) {
if (!this.isChangeInternal) {
if (this.isOpened) {
this.startSearch();
this.filterItems(newValue, false);
this.endSearch();
}
}
this.isChangeInternal = false;
};
class_1.prototype.onIsMultipleChanged = function () {
this.countFooterButtons();
};
class_1.prototype.onDisabledItemsChanged = function () {
var _a;
(_a = this.selectableModalComponent) === null || _a === void 0 ? void 0 : _a.update();
};
class_1.prototype.connectedCallback = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
this.emitStyle();
return [2 /*return*/];
});
});
};
class_1.prototype.componentWillLoad = function () {
this.setItems(this.items);
this.setValue(this.value);
this.countFooterButtons();
this.isInited = true;
};
/**
* Determines whether any item has been selected.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hasvalue).
*
* @returns A boolean determining whether any item has been selected.
* @memberof IonicSelectableComponent
*/
class_1.prototype.hasValue = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
return [2 /*return*/, this.parseValue() !== ''];
});
});
};
/**
* Opens Modal.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#open).
*
* @returns Promise that resolves when Modal has been opened.
* @memberof IonicSelectableComponent
*/
class_1.prototype.open = function () {
return __awaiter(this, void 0, void 0, function () {
var label, modalOptions, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
if (this.isDisabled || this.isOpened) {
return [2 /*return*/, Promise.reject("IonicSelectable is disabled or already opened: " + this.element.id)];
}
label = findItemLabel(this.element);
if (label && !this.titleText) {
this.titleText = label.textContent;
}
modalOptions = {
component: 'ionic-selectable-modal',
componentProps: { selectableComponent: this },
backdropDismiss: this.shouldBackdropClose,
};
if (this.modalCssClass) {
modalOptions.cssClass = this.modalCssClass;
}
if (this.modalEnterAnimation) {
modalOptions.enterAnimation = this.modalEnterAnimation;
}
if (this.modalLeaveAnimation) {
modalOptions.leaveAnimation = this.modalLeaveAnimation;
}
this.filterItems(this.searchText);
_c = this;
return [4 /*yield*/, modalController.create(modalOptions)];
case 1:
_c.modalElement = _d.sent();
return [4 /*yield*/, this.modalElement.present()];
case 2:
_d.sent();
this.isOpened = true;
this.setFocus();
this.whatchModalEvents();
this.emitOpened();
return [2 /*return*/, Promise.resolve()];
}
});
});
};
/**
* Closes Modal.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#close).
*
* @returns Promise that resolves when Modal has been closed.
* @memberof IonicSelectableComponent
*/
class_1.prototype.close = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
if (this.isDisabled || !this.isOpened) {
return [2 /*return*/, Promise.reject("IonicSelectable is disabled or already closed: " + this.element.id)];
}
return [4 /*yield*/, this.modalElement.dismiss()];
case 1:
_c.sent();
this.itemToAdd = null;
this.hideAddItemTemplate();
if (!this.shouldDelegateSearchToEvent) {
this.setHasSearchText('');
}
this.emitClosed();
return [2 /*return*/, Promise.resolve()];
}
});
});
};
/**
* Return a list of items that are selected and awaiting confirmation by user, when he has clicked Confirm button.
* After the user has clicked Confirm button items to confirm are cleared.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#itemstoconfirm).
*
* @returns a promise whit de list of items that are selected and awaiting confirmation by user
* @memberof IonicSelectableComponent
*/
class_1.prototype.getItemsToConfirm = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
return [2 /*return*/, this.itemsToConfirm];
});
});
};
/**
* Confirms selected items by updating value.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#confirm).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.confirm = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
if (this.isMultiple) {
this.setValue(this.selectedItems);
}
else if (this.hasConfirmButton || (this.hasTemplateRender && this.hasTemplateRender('footer'))) {
this.setValue(this.selectedItems[0] || null);
}
return [2 /*return*/];
});
});
};
/**
* Clears value.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#clear).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.clear = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
this.clearItems();
return [2 /*return*/];
});
});
};
/**
* Enables infinite scroll.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#enableinfinitescroll).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.enableInfiniteScroll = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
if (!this.hasInfiniteScroll) {
return [2 /*return*/];
}
this.selectableModalComponent.infiniteScrollElement.disabled = false;
return [2 /*return*/];
});
});
};
/**
* Disables infinite scroll.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#disableinfinitescroll).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.disableInfiniteScroll = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
if (!this.hasInfiniteScroll) {
return [2 /*return*/];
}
this.selectableModalComponent.infiniteScrollElement.disabled = true;
return [2 /*return*/];
});
});
};
/**
* Ends infinite scroll.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#endinfinitescroll).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.endInfiniteScroll = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
if (!this.hasInfiniteScroll) {
return [2 /*return*/];
}
this.selectableModalComponent.infiniteScrollElement.complete();
this.setItems(this.items);
return [2 /*return*/];
});
});
};
/**
* Scrolls to the top of Modal content.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#scrolltotop).
*
* @returns Promise that resolves when scroll has been completed.
* @memberof IonicSelectableComponent
*/
class_1.prototype.scrollToTop = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
if (!this.isOpened) {
return [2 /*return*/, Promise.reject("IonicSelectable content cannot be scrolled: " + this.element.id)];
}
return [4 /*yield*/, this.selectableModalComponent.contentElement.scrollToTop()];
case 1:
_c.sent();
return [2 /*return*/, Promise.resolve()];
}
});
});
};
/**
* Scrolls to the bottom of Modal content.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#scrolltobottom).
*
* @returns Promise that resolves when scroll has been completed.
* @memberof IonicSelectableComponent
*/
class_1.prototype.scrollToBottom = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
if (!this.isOpened) {
return [2 /*return*/, Promise.reject("IonicSelectable content cannot be scrolled: " + this.element.id)];
}
return [4 /*yield*/, this.selectableModalComponent.contentElement.scrollToBottom()];
case 1:
_c.sent();
return [2 /*return*/, Promise.resolve()];
}
});
});
};
/**
* Starts search process by showing Loading spinner.
* Use it together with `onSearch` event to indicate search start.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#startsearch).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.startSearch = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
if (this.isDisabled) {
return [2 /*return*/];
}
this.showLoading();
return [2 /*return*/];
});
});
};
/**
* Ends search process by hiding Loading spinner and refreshing items.
* Use it together with `onSearch` event to indicate search end.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#endsearch).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.endSearch = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
if (this.isDisabled) {
return [2 /*return*/];
}
this.hideLoading();
// Refresh items manually.
// Pending - this.setItems(this.items);
this.emitOnSearchSuccessedOrFailed(this.hasFilteredItems);
return [2 /*return*/];
});
});
};
/**
* Shows Loading spinner.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#showloading).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.showLoading = function () {
return __awaiter(this, void 0, void 0, function () {
var _a;
return __generator(this, function (_c) {
if (this.isDisabled) {
return [2 /*return*/];
}
this.isSearching = true;
(_a = this.selectableModalComponent) === null || _a === void 0 ? void 0 : _a.update();
return [2 /*return*/];
});
});
};
/**
* Hides Loading spinner.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#hideloading).
*
* @memberof IonicSelectableComponent
*/
class_1.prototype.hideLoading = function () {
return __awaiter(this, void 0, void 0, function () {
var _a;
return __generator(this, function (_c) {
if (this.isDisabled) {
return [2 /*return*/];
}
this.isSearching = false;
(_a = this.selectableModalComponent) === null || _a === void 0 ? void 0 : _a.update();
return [2 /*return*/];
});
});
};
/**
* Adds item.
* **Note**: If you want an item to be added to the original array as well use two-way data binding syntax on `[(items)]` field.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#additem).
*
* @param item Item to add.
* @returns Promise that resolves when item has been added.
* @memberof IonicSelectableComponent
*/
class_1.prototype.addItem = function (item) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_c) {
// Adding item triggers onItemsChange.
// Return a promise that resolves when onItemsChange finishes.
// We need a promise or user could do something after item has been added,
// e.g. use search() method to find the added item.
this.items.push(item);
this.setItems(this.items);
return [2 /*return*/, Promise.resolve()];
});
});
};
/**
* Deletes item.
* **Note**: If you want an item to be deleted from the original array as well use two-way data binding syntax on `[(items)]` field.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#deleteitem).
*
* @param item Item to delete.
* @returns Promise that resolves when item has been deleted.
* @memberof IonicSelectableComponent
*/
class_1.prototype.deleteItem = function (item) {
return __awaiter(this, void 0, void 0, function () {
var hasValueChanged, values, items;
var _this = this;
return __generator(this, function (_c) {
hasValueChanged = false;
// Remove deleted item from selected items.
if (this.selectedItems) {
this.selectedItems = this.selectedItems.filter(function (_item) { return _this.getItemValue(item) !== _this.getStoredItemValue(_item); });
}
// Remove deleted item from value.
if (this.value) {
if (this.isMultiple) {
values = this.value.filter(function (value) {
return value.id !== item.id;
});
if (values.length !== this.value.length) {
this.value = values;
hasValueChanged = true;
}
}
else {
if (item === this.value) {
this.value = null;
hasValueChanged = true;
}
}
}
if (hasValueChanged) {
this.emitChanged();
}
items = this.items.filter(function (_item) {
return _item.id !== item.id;
});
// Refresh items on parent component.
// Pending - this.itemsChange.emit(items);
// Refresh list.
this.setItems(items);
return [2 /*return*/, Promise.resolve()];
});
});
};
/**
* Selects or deselects all or specific items.
* See more on [GitHub](https://github.com/eakoriakin/ionic-selectable/wiki/Documentation#toggleitems).
*
* @param isSelect Determines whether to select or deselect items.
* @param [items] Items to toggle. If items are not set all items will be toggled.
* @memberof IonicSelectableComponent
*/
class_1.prototype.toggleItems = function (isSelect, items) {
return __awaiter(this, void 0, void 0, function () {
var _a, hasItems, itemsToToggle, hasItems;
var _this = this;
return __generator(this, function (_c) {
if (isSelect) {
hasItems = items && items.length;
itemsToToggle = this.groups.reduce(function (allItems, group) {
return allItems.concat(group.items);
}, []);
// Don't allow to select all items in single mode.
if (!this.isMultiple && !hasItems) {
itemsToToggle = [];
}
// Toggle specific items.
if (hasItems) {