@syncfusion/ej2-navigations 31.1.17 → 31.1.20

package/styles/treeview/material3.css

@@ -144,9 +144,7 @@
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -183,7 +181,6 @@
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -209,7 +206,7 @@
 }
 @supports (-webkit-overflow-scrolling: touch) {
   .e-treeview .e-fullrow {
-    z-index: -1;
+    z-index: 0;
   }
 }
 .e-treeview .e-checkbox-wrapper {
@@ -250,6 +247,8 @@
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 .e-treeview .e-navigable-text {
   padding: 0;
@@ -887,6 +886,7 @@
 .e-bigger .e-treeview .e-list-text,
 .e-treeview.e-bigger .e-list-text {
   font-size: 16px;
+  padding: 12px;
 }
 .e-bigger .e-treeview .e-icon-collapsible::before,
 .e-bigger .e-treeview .e-icon-expandable::before,

package/styles/treeview/tailwind-dark.css

@@ -108,9 +108,7 @@
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 2px 0 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -150,7 +148,6 @@
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -175,7 +172,7 @@
 }
 @supports (-webkit-overflow-scrolling: touch) {
   .e-treeview .e-fullrow {
-    z-index: -1;
+    z-index: 0;
   }
 }
 .e-treeview .e-checkbox-wrapper {
@@ -210,12 +207,15 @@
 }
 .e-treeview .e-list-text .e-input-group {
   height: 30px;
-  margin-bottom: 3px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 .e-treeview .e-navigable-text {
   padding: 0 8px;

package/styles/treeview/tailwind.css

@@ -108,9 +108,7 @@
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 2px 0 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -150,7 +148,6 @@
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -175,7 +172,7 @@
 }
 @supports (-webkit-overflow-scrolling: touch) {
   .e-treeview .e-fullrow {
-    z-index: -1;
+    z-index: 0;
   }
 }
 .e-treeview .e-checkbox-wrapper {
@@ -210,12 +207,15 @@
 }
 .e-treeview .e-list-text .e-input-group {
   height: 30px;
-  margin-bottom: 3px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 .e-treeview .e-navigable-text {
   padding: 0 8px;

package/styles/treeview/tailwind3.css

@@ -128,9 +128,7 @@
   list-style: none;
 }
 .e-treeview .e-list-item .e-ul {
-  margin: 2px 0 -2px;
   padding: 0 0 0 20px;
-  margin: 0;
 }
 .e-treeview .e-list-item.e-disable > .e-text-content,
 .e-treeview .e-list-item.e-disable > .e-fullrow {
@@ -153,6 +151,10 @@
 .e-treeview .e-list-item .e-icons.e-icons-spinner::before {
   content: none;
 }
+.e-treeview .e-list-item .e-text-content .e-list-text:has(> .e-input-group) {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
 .e-treeview .e-icons .e-spinner-pane {
   position: relative;
 }
@@ -167,7 +169,6 @@
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid;
   cursor: pointer;
   margin: 0;
   padding: 0 0 0 20px;
@@ -193,7 +194,7 @@
 }
 @supports (-webkit-overflow-scrolling: touch) {
   .e-treeview .e-fullrow {
-    z-index: -1;
+    z-index: 0;
   }
 }
 .e-treeview .e-checkbox-wrapper {
@@ -228,13 +229,17 @@
   vertical-align: middle;
 }
 .e-treeview .e-list-text .e-input-group {
-  height: 30px;
+  height: 32px;
   margin-bottom: 0;
   min-width: 150px;
   vertical-align: bottom;
 }
 .e-treeview .e-list-text .e-input-group .e-input {
   height: 28px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 20px;
+  height: 32px;
 }
 .e-treeview .e-navigable-text {
   padding: 10px 8px;
@@ -729,6 +734,13 @@
 .e-treeview.e-bigger .e-list-text .e-input-group .e-input {
   height: 36px;
 }
+.e-bigger .e-treeview .e-list-text .e-input-group .e-input,
+.e-treeview.e-bigger .e-list-text .e-input-group .e-input {
+  height: 40px;
+  line-height: 24px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
 .e-bigger .e-treeview .e-checkbox-wrapper,
 .e-treeview.e-bigger .e-checkbox-wrapper {
   margin: 0 0 0 12px;

package/dist/ts/accordion/accordion-model.d.ts

@@ -1,285 +0,0 @@
-import { Component, EventHandler, Property, Event, EmitType, AnimationModel, KeyboardEvents, rippleEffect, animationMode } from '@syncfusion/ej2-base';import { KeyboardEventArgs, BaseEventArgs, Effect, getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';import { isVisible, closest, attributes, detach, select, addClass, removeClass, append } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, selectAll, SanitizeHtmlHelper, isRippleEnabled } from '@syncfusion/ej2-base';
-import {ExpandMode,AccordionClickArgs,ExpandEventArgs,ExpandedEventArgs} from "./accordion";
-import {ComponentModel} from '@syncfusion/ej2-base';
-
-/**
- * Interface for a class AccordionActionSettings
- */
-export interface AccordionActionSettingsModel {
-
-    /**
-     * Specifies the type of animation.
-     *
-     * @default 'SlideDown'
-     * @aspType string
-     */
-    effect?: 'None' | Effect;
-
-    /**
-     * Specifies the duration to animate.
-     *
-     * @default 400
-     */
-    duration?: number;
-
-    /**
-     * Specifies the animation timing function.
-     *
-     * @default 'linear'
-     */
-    easing?: string;
-
-}
-
-/**
- * Interface for a class AccordionAnimationSettings
- */
-export interface AccordionAnimationSettingsModel {
-
-    /**
-     * Specifies the animation to appear while collapsing the Accordion item.
-     *
-     * @default { effect: 'SlideDown', duration: 400, easing: 'linear' }
-     */
-    collapse?: AccordionActionSettingsModel;
-
-    /**
-     * Specifies the animation to appear while expanding the Accordion item.
-     *
-     * @default { effect: 'SlideDown', duration: 400, easing: 'linear' }
-     */
-    expand?: AccordionActionSettingsModel;
-
-}
-
-/**
- * Interface for a class AccordionItem
- */
-export interface AccordionItemModel {
-
-    /**
-     * Sets the text content to be displayed for the Accordion item.
-     * You can set the content of the Accordion item using `content` property.
-     * It also supports to include the title as `HTML element`, `string`, or `query selector`.
-     * ```typescript
-     *   let accordionObj: Accordion = new Accordion( {
-     *        items: [
-     *          { header: 'Accordion Header', content: 'Accordion Content' },
-     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div>' },
-     *          { header: '#headerContent', content: '#panelContent' }]
-     *        });
-     *   accordionObj.appendTo('#accordion');
-     * ```
-     *
-     * @default null
-     */
-    content?: string;
-
-    /**
-     * Sets the header text to be displayed for the Accordion item.
-     * You can set the title of the Accordion item using `header` property.
-     * It also supports to include the title as `HTML element`, `string`, or `query selector`.
-     * ```typescript
-     *   let accordionObj: Accordion = new Accordion( {
-     *        items: [
-     *          { header: 'Accordion Header', content: 'Accordion Content' },
-     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div>' },
-     *          { header: '#headerContent', content: '#panelContent' }]
-     *        });
-     *   accordionObj.appendTo('#accordion');
-     * ```
-     *
-     * @default null
-     */
-    header?: string;
-
-    /**
-     * Defines single/multiple classes (separated by a space) are to be used for Accordion item customization.
-     *
-     * @default null
-     */
-    cssClass?: string;
-
-    /**
-     * Defines an icon with the given custom CSS class that is to be rendered before the header text.
-     * Add the css classes to the `iconCss` property and write the css styles to the defined class to set images/icons.
-     * Adding icon is applicable only to the header.
-     * ```typescript
-     *   let accordionObj: Accordion = new Accordion( {
-     *        items: [
-     *          { header: 'Accordion Header', iconCss: 'e-app-icon' }]
-     *        });
-     *   accordionObj.appendTo('#accordion');
-     * ```
-     * ```css
-     * .e-app-icon::before {
-     *   content: "\e710";
-     * }
-     * ```
-     *
-     * @default null
-     */
-    iconCss?: string;
-
-    /**
-     * Sets the expand (true) or collapse (false) state of the Accordion item. By default, all the items are in a collapsed state.
-     *
-     * @default false
-     */
-    expanded?: boolean;
-
-    /**
-     * Sets false to hide an accordion item.
-     *
-     * @default true
-     */
-    visible?: boolean;
-
-    /**
-     * Sets true to disable an accordion item.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Sets unique ID to accordion item.
-     *
-     * @default null
-     */
-    id?: string;
-
-}
-
-/**
- * Interface for a class Accordion
- */
-export interface AccordionModel extends ComponentModel{
-
-    /**
-     * An array of item that is used to specify Accordion items.
-     * ```typescript
-     *   let accordionObj: Accordion = new Accordion( {
-     *        items: [
-     *          { header: 'Accordion Header', content: 'Accordion Content' }]
-     *        });
-     *   accordionObj.appendTo('#accordion');
-     * ```
-     *
-     * @default []
-     */
-    items?: AccordionItemModel[];
-
-    /**
-     * Specifies the datasource for the accordion items.
-     *
-     * @isdatamanager false
-     * @default []
-     */
-    dataSource?: Object[];
-
-    /**
-     * Specifies the template option for accordion items.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    itemTemplate?: string | Function;
-
-    /**
-     * Specifies the header title template option for accordion items.
-     *
-     * @default null
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    headerTemplate?: string | Function;
-
-    /**
-     * Specifies the width of the Accordion in pixels/number/percentage. Number value is considered as pixels.
-     *
-     * @default '100%'
-     */
-    width?: string | number;
-
-    /**
-     * Specifies the height of the Accordion in pixels/number/percentage. Number value is considered as pixels.
-     *
-     * @default 'auto'
-     */
-    height?: string | number;
-
-    /**
-     * Specifies the expanded items at initial load.
-     *
-     * @default []
-     */
-    expandedIndices?: number[];
-
-    /**
-     * Specifies the options to expand single or multiple panel at a time.
-     * The possible values are:
-     * * `Single`: Sets to expand only one Accordion item at a time.
-     * * `Multiple`: Sets to expand more than one Accordion item at a time.
-     *
-     * @default 'Multiple'
-     */
-    expandMode?: ExpandMode;
-
-    /**
-     * Specifies whether to enable the rendering of untrusted HTML values in the Accordion component.
-     * When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.
-     *
-     * @default true
-     */
-    enableHtmlSanitizer?: boolean;
-
-    /**
-     * Specifies the animation configuration settings for expanding and collapsing the panel.
-     *
-     * @default { expand: { effect: 'SlideDown', duration: 400, easing: 'linear' },
-     * collapse: { effect: 'SlideUp', duration: 400, easing: 'linear' }}
-     */
-    animation?: AccordionAnimationSettingsModel;
-
-    /**
-     * The event will be fired while clicking anywhere within the Accordion.
-     *
-     * @event clicked
-     */
-    clicked?: EmitType<AccordionClickArgs>;
-
-    /**
-     * The event will be fired before the item gets collapsed/expanded.
-     *
-     * @event expanding
-     */
-    expanding?: EmitType<ExpandEventArgs>;
-
-    /**
-     * The event will be fired after the item gets collapsed/expanded.
-     *
-     * @event expanded
-     */
-    expanded?: EmitType<ExpandedEventArgs>;
-
-    /**
-     * The event will be fired once the control rendering is completed.
-     *
-     * @event created
-     */
-    created?: EmitType<Event>;
-
-    /**
-     * The event will be fired when the control gets destroyed.
-     *
-     * @event destroyed
-     */
-    destroyed?: EmitType<Event>;
-
-}