ids-enterprise-wc 1.0.0-beta.17 → 1.0.0-beta.18

package/components/ids-list-view/ids-list-view-search-mixin.d.ts

@@ -3,6 +3,7 @@ import { IdsConstructor } from '../../core/ids-element';
 import type IdsSearchField from '../ids-search-field/ids-search-field';
 type Constraints = IdsConstructor<EventsMixinInterface>;
 type SearchItem = string | HTMLElement | object;
+type SearchFilterModes = string | null | 'contains' | 'keyword' | 'phrase-starts-with' | 'word-starts-with';
 declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) => {
     new (...args: any[]): {
         connectedCallback(): void;
@@ -26,7 +27,7 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         /**
          * Current search term
          */
-        "__#116@#term": string;
+        "__#120@#term": string;
         /**
          * Get search container element
          * @returns {HTMLDivElement|null|undefined} The search container element
@@ -42,31 +43,36 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
          * @param {string | null} value The value
          */
         searchFieldId: string | null;
+        get searchFilterMode(): string;
         /**
          * Set search filter mode
          * @param {SearchFilterModes} value The value
          */
-        searchFilterMode: string;
+        set searchFilterMode(value: SearchFilterModes);
+        get searchTermCaseSensitive(): boolean;
         /**
          * Set search term case sensitive
          * @param {string | boolean | null} value The value
          */
-        searchTermCaseSensitive: boolean;
+        set searchTermCaseSensitive(value: string | boolean | null);
+        get searchTermMinSize(): number;
         /**
          * Set search term min size, will trigger filtering only when its length is greater than or equals to term value.
          * @param {string | number | null} value The value
          */
-        searchTermMinSize: number;
+        set searchTermMinSize(value: string | number | null);
+        get searchable(): boolean;
         /**
          * Set searchable which allows list view to be filtered
          * @param {string | boolean | null} value The value
          */
-        searchable: boolean;
+        set searchable(value: string | boolean | null);
+        get suppressHighlight(): boolean;
         /**
          * Set search term text to be suppress highlight when using searchable
          * @param {string | boolean | null} value The value
          */
-        suppressHighlight: boolean;
+        set suppressHighlight(value: string | boolean | null);
         /**
          * Get search template
          * @returns {string} The search template
@@ -92,20 +98,20 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
          * @private
          * @returns {void}
          */
-        "__#116@#attachSearchField"(): void;
+        "__#120@#attachSearchField"(): void;
         /**
          * Get object props as text
          * @param {string} item The term value
          * @returns {string|HTMLElement|object} The searchable content
          */
-        "__#116@#objectPropsAsText"(item: string | HTMLElement | object): string;
+        "__#120@#objectPropsAsText"(item: string | HTMLElement | object): string;
         /**
          * Get searchable content
          * @private
          * @param {string} item The term value
          * @returns {string|HTMLElement|object} The searchable content
          */
-        "__#116@#searchableContent"(item: string | HTMLElement | object): string;
+        "__#120@#searchableContent"(item: string | HTMLElement | object): string;
         /**
          * Matches the provided term against the beginning of all words in a text string.
          * @private
@@ -113,14 +119,14 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
          * @param {string} term the term for which to search in the text string.
          * @returns {boolean} true if the term is present.
          */
-        "__#116@#wordStartsWithFilter"(text: string, term: string): boolean;
+        "__#120@#wordStartsWithFilter"(text: string, term: string): boolean;
         /**
          * Handle search for given trem
          * @private
          * @param {string} term The term value
          * @returns {void}
          */
-        "__#116@#handleSearch"(term: string): void;
+        "__#120@#handleSearch"(term: string): void;
         /**
          * Set search term highlight
          * @param {string | HTMLElement | object} item The from data item
@@ -134,7 +140,7 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
         detachEventsByName: (eventName: string) => void;
         handledEvents: Map<any, any>;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -142,7 +148,10 @@ declare const IdsListViewSearchMixin: <T extends Constraints>(superclass: T) =>
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
-        "__#3@#addBaseName"(): void;
+        mountedCallback(): void;
+        "__#3@#addBaseName"(): void; /**
+         * Possible Filter Modes
+         */
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
         render(force?: boolean | undefined): any;

package/components/ids-list-view/ids-list-view-search-mixin.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-SOPVBEZ6.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-VEAPPKDG.js";import"../../chunks/ids-chunk-NSM2KAOK.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-RNW2M7BI.js";import"../../chunks/ids-chunk-UR2NLGN4.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-4NXTNKXV.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

package/components/ids-list-view/ids-list-view.css

@@ -1,5 +1,135 @@
-:host .ids-list-view-item {
-  border: none;
+:host slot {
+  display: block;
+}
+
+:host([no-margins]) .ids-list-view .ids-list-view-body li:first-child,
+:host([no-margins]) .ids-list-view .ids-list-view-body ids-list-view-item:first-child,
+:host([no-margins]) .ids-list-view .ids-list-view-body ::slotted(li):first-child,
+:host([no-margins]) .ids-list-view .ids-list-view-body ::slotted(ids-list-view-item):first-child {
+  margin-block-start: var(--ids-space-none);
+}
+
+:host([searchable]) .ids-list-view-body:first-child,
+.has-searchfield .ids-list-view-body:first-child {
+  margin-block-start: 8px;
+}
+
+.ids-list-view {
+  height: var(--ids-list-view-height);
+  overflow: auto;
+  scroll-behavior: smooth;
+  position: relative;
+}
+.ids-list-view .ids-list-view-body {
   margin: 0;
   padding: 0;
+}
+.ids-list-view .ids-list-view-body:focus {
+  border-color: var(--ids-list-view-color-border-focus);
+}
+.ids-list-view .ids-list-view-body li {
+  padding: var(--ids-list-view-item-padding);
+  background-color: var(--ids-list-view-item-color-background-default);
+  border: var(--ids-list-view-item-border);
+  border-top-color: var(--ids-list-view-item-color-border-top);
+  contain: content;
+  list-style-type: none;
+}
+.ids-list-view.selectable-multiple .list-item-area, .ids-list-view.selectable-mixed .list-item-area {
+  display: flex;
+  align-items: center;
+}
+.ids-list-view.selectable-multiple .list-item-area .list-item-checkbox, .ids-list-view.selectable-mixed .list-item-area .list-item-checkbox {
+  padding-inline-end: var(--ids-space-70);
+  flex-grow: 0;
+  flex-shrink: 0;
+  max-height: var(--ids-space-60);
+  max-width: var(--ids-space-60);
+}
+.ids-list-view.selectable-multiple .list-item-area .list-item-checkbox[disabled]::part(checkmark), .ids-list-view.selectable-mixed .list-item-area .list-item-checkbox[disabled]::part(checkmark) {
+  background-color: transparent;
+}
+.ids-list-view.is-scrolling {
+  box-shadow: var(--ids-scroll-shadow);
+  border-top: var(--ids-scroll-color-border-top);
+}
+
+ids-swappable-item {
+  border-bottom-color: var(--ids-color-neutral-20);
+  border: none;
+}
+
+ids-swappable-item[over] {
+  border: 1px dashed var(--ids-color-neutral-80);
+}
+
+::slotted(ids-search-field) {
+  margin-bottom: 8px;
+}
+
+.sortable .ids-list-view li:hover,
+.sortable .ids-list-view li:focus,
+.sortable .ids-list-view li:focus-visible,
+.sortable .ids-list-view li:focus-within,
+.sortable .ids-list-view ids-list-view-item:hover,
+.sortable .ids-list-view ids-list-view-item:focus,
+.sortable .ids-list-view ids-list-view-item:focus-visible,
+.sortable .ids-list-view ids-list-view-item:focus-within,
+.sortable .ids-list-view ::slotted(li:hover),
+.sortable .ids-list-view ::slotted(li:focus),
+.sortable .ids-list-view ::slotted(li:focus-visible),
+.sortable .ids-list-view ::slotted(li:focus-within),
+.sortable .ids-list-view ::slotted(ids-list-view-item:hover),
+.sortable .ids-list-view ::slotted(ids-list-view-item:focus),
+.sortable .ids-list-view ::slotted(ids-list-view-item:focus-visible),
+.sortable .ids-list-view ::slotted(ids-list-view-item:focus-within),
+[sortable] .ids-list-view li:hover,
+[sortable] .ids-list-view li:focus,
+[sortable] .ids-list-view li:focus-visible,
+[sortable] .ids-list-view li:focus-within,
+[sortable] .ids-list-view ids-list-view-item:hover,
+[sortable] .ids-list-view ids-list-view-item:focus,
+[sortable] .ids-list-view ids-list-view-item:focus-visible,
+[sortable] .ids-list-view ids-list-view-item:focus-within,
+[sortable] .ids-list-view ::slotted(li:hover),
+[sortable] .ids-list-view ::slotted(li:focus),
+[sortable] .ids-list-view ::slotted(li:focus-visible),
+[sortable] .ids-list-view ::slotted(li:focus-within),
+[sortable] .ids-list-view ::slotted(ids-list-view-item:hover),
+[sortable] .ids-list-view ::slotted(ids-list-view-item:focus),
+[sortable] .ids-list-view ::slotted(ids-list-view-item:focus-visible),
+[sortable] .ids-list-view ::slotted(ids-list-view-item:focus-within),
+:host(.sortable) li:hover,
+:host(.sortable) li:focus,
+:host(.sortable) li:focus-visible,
+:host(.sortable) li:focus-within,
+:host(.sortable) ids-list-view-item:hover,
+:host(.sortable) ids-list-view-item:focus,
+:host(.sortable) ids-list-view-item:focus-visible,
+:host(.sortable) ids-list-view-item:focus-within,
+:host(.sortable) ::slotted(li:hover),
+:host(.sortable) ::slotted(li:focus),
+:host(.sortable) ::slotted(li:focus-visible),
+:host(.sortable) ::slotted(li:focus-within),
+:host(.sortable) ::slotted(ids-list-view-item:hover),
+:host(.sortable) ::slotted(ids-list-view-item:focus),
+:host(.sortable) ::slotted(ids-list-view-item:focus-visible),
+:host(.sortable) ::slotted(ids-list-view-item:focus-within),
+:host([sortable]) li:hover,
+:host([sortable]) li:focus,
+:host([sortable]) li:focus-visible,
+:host([sortable]) li:focus-within,
+:host([sortable]) ids-list-view-item:hover,
+:host([sortable]) ids-list-view-item:focus,
+:host([sortable]) ids-list-view-item:focus-visible,
+:host([sortable]) ids-list-view-item:focus-within,
+:host([sortable]) ::slotted(li:hover),
+:host([sortable]) ::slotted(li:focus),
+:host([sortable]) ::slotted(li:focus-visible),
+:host([sortable]) ::slotted(li:focus-within),
+:host([sortable]) ::slotted(ids-list-view-item:hover),
+:host([sortable]) ::slotted(ids-list-view-item:focus),
+:host([sortable]) ::slotted(ids-list-view-item:focus-visible),
+:host([sortable]) ::slotted(ids-list-view-item:focus-within) {
+  background: transparent;
 }