@sankhyalabs/ezui 6.0.1 → 6.1.0-dev.2

package/dist/esm/ez-search.entry.js

@@ -4,8 +4,8 @@ import { ObjectUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
 import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
-import './ICustomRender-875b5a40.js';
-import { R as REQUIRED_INFO } from './constants-4e0d35b7.js';
+import './FormLayout-071d324c.js';
+import { R as REQUIRED_INFO } from './constants-b036528f.js';
 import { r as replaceQuotes, a as replaceHighlight } from './searchFormatters-8229207e.js';
 
 const ezSearchCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}";
@@ -50,6 +50,7 @@ const EzSearch = class {
     this.ensureClearButtonVisible = false;
     this.suppressPreLoad = true;
     this.autoFocus = false;
+    this.alternativePlaceholder = undefined;
   }
   observeErrorMessage() {
     var _a;
@@ -615,7 +616,7 @@ const EzSearch = class {
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
       : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el] }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
   }

package/dist/esm/ez-skeleton.entry.js

@@ -0,0 +1,145 @@
+import { r as registerInstance, h } from './index-5a720e56.js';
+
+const ALLOWED_ANIMATIONS = ['progress', 'pulse', 'false'];
+const ALLOWED_VARIANTS = ['circle', 'rect', 'text'];
+const DEFAULT_VALUES = {
+  COUNT: 1,
+  VARIANT: 'text',
+  ANIMATION: 'progress'
+};
+const SKELETON_ARIA = {
+  DATA_BUSY: 'true',
+  DATA_VALUEMIN: '0',
+  DATA_VALUEMAX: '100',
+  DATA_VALUETEXT: 'Loading...',
+  ROLE: 'progressbar',
+  TABINDEX: '0'
+};
+const VARIANT_TYPES = {
+  CIRCLE: 'circle',
+  RECT: 'rect',
+  TEXT: 'text'
+};
+const ANIMATION_TYPES = {
+  PROGRESS: 'progress',
+  PULSE: 'pulse',
+  FALSE: 'false'
+};
+
+const ezSkeletonCss = ".skeleton {\n  background: var(--skeleton-background, #f0f3f7) no-repeat;\n  border-radius: var(--skeleton-border-radius, 12px);\n  width: var(--skeleton-width, 100%);\n  height: var(--skeleton-height, 20px);\n  display: inline-block;\n  margin-bottom: var(--skeleton-margin-bottom, 0px);\n\tmargin-top: var(--skeleton-margin-top, 0px);\n\tmargin-right: var(--skeleton-margin-right, 0px);\n\tmargin-left: var(--skeleton-margin-left, 0px);\n  box-sizing: border-box;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n  -webkit-will-change: transform;\n  -moz-will-change: transform;\n  will-change: transform;\n\n  &:after,\n  &:before {\n    box-sizing: border-box;\n  }\n\n  &.circle {\n    width: var(--skeleton-width, 40px);\n    height: var(--skeleton-height, 40px);\n    margin-bottom: var(--skeleton-margin-bottom, 0px);\n    border-radius: var(--skeleton-border-radius, 50%);\n  }\n\n  &.rect {\n    border-radius: var(--skeleton-border-radius, 0px);\n  }\n\n  &.progress,\n  &.progress-dark {\n    -webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -moz-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -ms-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    background-size: 200px 100%;\n  }\n\n  &.progress {\n    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));\n    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));\n    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));\n    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));\n  }\n\n  &.progress-dark {\n    background-image: -webkit-linear-gradient(90deg, transparent, hsla(0, 0%, 0%, 0.2), transparent);\n    background-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n    background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n  }\n\n  &.pulse {\n    -webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -moz-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -ms-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    animation-delay: 0.5s;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &.pulse,\n    &.progress-dark,\n    &.progress {\n      animation: none;\n    }\n\n    &.progress,\n    &.progress-dark {\n      background-image: none;\n    }\n  }\n}\n\n@-webkit-keyframes progress {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n@-moz-keyframes progress {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n@-ms-keyframes progress {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n@keyframes progress {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-moz-keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-ms-keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";
+
+const EzSkeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.items = [];
+    this.template = undefined;
+    this.count = DEFAULT_VALUES.COUNT;
+    this.variant = DEFAULT_VALUES.VARIANT;
+    this.width = null;
+    this.height = null;
+    this.marginTop = null;
+    this.marginRight = null;
+    this.marginBottom = null;
+    this.marginLeft = null;
+    this.animation = DEFAULT_VALUES.ANIMATION;
+  }
+  componentWillLoad() {
+    this.initializeItems();
+  }
+  componentWillUpdate() {
+    this.initializeItems();
+  }
+  initializeItems() {
+    this.items = Array(this.count).fill(1);
+  }
+  getSkeletonConfig(props) {
+    if (!props)
+      return;
+    if ((props === null || props === void 0 ? void 0 : props.variant) == VARIANT_TYPES.CIRCLE) {
+      props.width = props.width || 'var(--skeleton-width, 40px)';
+      props.height = props.height || 'var(--skeleton-height, 40px)';
+    }
+    else {
+      props.width = props.width || 'var(--skeleton-width, 100%)';
+    }
+    const width = (props.marginRight || props.marginLeft) && props.width && props.variant != VARIANT_TYPES.CIRCLE
+      ? `calc(${props.width} ${props.marginRight ? `- ${props.marginRight}` : ''} ${props.marginLeft ? `- ${props.marginLeft}` : ''})`
+      : props.width;
+    return {
+      skeletonClasses: {
+        skeleton: true,
+        circle: props.variant === VARIANT_TYPES.CIRCLE,
+        rect: props.variant === VARIANT_TYPES.RECT,
+        progress: props.animation === ANIMATION_TYPES.PROGRESS,
+        pulse: props.animation === ANIMATION_TYPES.PULSE,
+      },
+      styles: {
+        width,
+        height: props.height,
+        marginTop: props.marginTop,
+        marginRight: props.marginRight,
+        marginBottom: props.marginBottom,
+        marginLeft: props.marginLeft,
+      },
+    };
+  }
+  validateVariant(variant) {
+    return ALLOWED_VARIANTS.includes(variant) ? variant : DEFAULT_VALUES.VARIANT;
+  }
+  validateAnimation(animation) {
+    return ALLOWED_ANIMATIONS.includes(animation) ? animation : DEFAULT_VALUES.ANIMATION;
+  }
+  renderSkeletonTemplate(templateContent) {
+    var _a;
+    const innerHTMLTemp = ((_a = templateContent['$attrs']) === null || _a === void 0 ? void 0 : _a.innerHTML) || templateContent;
+    if (typeof innerHTMLTemp === 'string') {
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = innerHTMLTemp;
+      const elements = (tempDiv === null || tempDiv === void 0 ? void 0 : tempDiv.querySelectorAll(':not(.skeleton) > *')) || [];
+      return Array.from(elements).map(element => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if ((_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains('skeleton')) {
+          const skeletonConfig = this.getSkeletonConfig({
+            variant: this.validateVariant(((_b = element.getAttribute('variant')) === null || _b === void 0 ? void 0 : _b.replace(/[{}]/g, '')) || this.variant),
+            width: ((_c = element.getAttribute('width')) === null || _c === void 0 ? void 0 : _c.replace(/[{}]/g, '')) || this.width,
+            height: ((_d = element.getAttribute('height')) === null || _d === void 0 ? void 0 : _d.replace(/[{}]/g, '')) || this.height,
+            marginTop: ((_e = element.getAttribute('marginTop')) === null || _e === void 0 ? void 0 : _e.replace(/[{}]/g, '')) || this.marginTop,
+            marginLeft: ((_f = element.getAttribute('marginLeft')) === null || _f === void 0 ? void 0 : _f.replace(/[{}]/g, '')) || this.marginLeft,
+            marginRight: ((_g = element.getAttribute('marginRight')) === null || _g === void 0 ? void 0 : _g.replace(/[{}]/g, '')) || this.marginRight,
+            marginBottom: ((_h = element.getAttribute('marginBottom')) === null || _h === void 0 ? void 0 : _h.replace(/[{}]/g, '')) || this.marginBottom,
+            animation: this.validateAnimation(((_j = element.getAttribute('animation')) === null || _j === void 0 ? void 0 : _j.replace(/[{}]/g, '')) || this.animation),
+          });
+          const count = Number((_k = element.getAttribute('count')) === null || _k === void 0 ? void 0 : _k.replace(/[{}]/g, '')) || 1;
+          return Array(count)
+            .fill(1)
+            .map((_, index) => this.renderSkeletonItem(index, skeletonConfig));
+        }
+        return h("div", { innerHTML: element.outerHTML });
+      });
+    }
+    return templateContent;
+  }
+  renderSkeletonItem(index, skeletonConfig) {
+    const config = skeletonConfig ||
+      this.getSkeletonConfig({
+        variant: this.validateVariant(this.variant),
+        animation: this.validateAnimation(this.animation),
+        width: this.width,
+        height: this.height,
+        marginTop: this.marginTop,
+        marginRight: this.marginRight,
+        marginBottom: this.marginBottom,
+        marginLeft: this.marginLeft,
+      });
+    return this.renderSkeletonSpan(index, config);
+  }
+  renderSkeletonSpan(index, config) {
+    return (h("span", { key: index, class: config === null || config === void 0 ? void 0 : config.skeletonClasses, style: config === null || config === void 0 ? void 0 : config.styles, "data-busy": SKELETON_ARIA.DATA_BUSY, "data-valuemin": SKELETON_ARIA.DATA_VALUEMIN, "data-valuemax": SKELETON_ARIA.DATA_VALUEMAX, "data-valuetext": SKELETON_ARIA.DATA_VALUETEXT, role: SKELETON_ARIA.ROLE, tabindex: SKELETON_ARIA.TABINDEX }));
+  }
+  render() {
+    return !this.template ? this.items.map((_, index) => this.renderSkeletonItem(index)) : this.renderSkeletonTemplate(this.template);
+  }
+};
+EzSkeleton.style = ezSkeletonCss;
+
+export { EzSkeleton as ez_skeleton };