@syncfusion/ej2-navigations 20.3.60 → 20.4.38

package/src/treeview/treeview.d.ts

@@ -373,6 +373,11 @@ export declare class FieldsSettings extends ChildProperty<FieldsSettings> {
      * @default null
      */
     query: Query;
+    /**
+     * Specifies whether the node can be selected by users or not
+     * When set to false, the user interaction is prevented for the corresponding node.
+     */
+    selectable: string;
     /**
      * Specifies the mapping field for selected state of the TreeView node.
      */
@@ -446,11 +451,11 @@ export declare class NodeAnimationSettings extends ChildProperty<NodeAnimationSe
  * The TreeView component is used to represent hierarchical data in a tree like structure with advanced
  * functions to perform edit, drag and drop, selection with check-box, and more.
  * ```html
- *  <div id="tree"></div>
+ * <div id="tree"></div>
  * ```
  * ```typescript
- *  let treeObj: TreeView = new TreeView();
- *  treeObj.appendTo('#tree');
+ * let treeObj: TreeView = new TreeView();
+ * treeObj.appendTo('#tree');
  * ```
  */
 export declare class TreeView extends Component<HTMLElement> implements INotifyPropertyChanged {
@@ -565,18 +570,45 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      */
     animation: NodeAnimationSettingsModel;
     /**
-     * The `checkedNodes` property is used to set the nodes that need to be checked or
-     * get the ID of nodes that are currently checked in the TreeView component.
+     * The `checkedNodes` property is used to set the nodes that need to be checked.
+     * This property returns the checked nodes ID in the TreeView component.
      * The `checkedNodes` property depends upon the value of `showCheckBox` property.
      * For more information on checkedNodes, refer to
      * [checkedNodes](../../treeview/check-box#checked-nodes).
-     *
+     * ```html
+     * <div id="tree"></div>
+     * ```
+     * ```typescript
+     * let treeObj: TreeView = new TreeView({
+     * fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
+     * showCheckBox: true,
+     * checkedNodes: ['01-01','02']
+     * });
+     * treeObj.appendTo('#tree');
+     * ```
      * @default []
      */
     checkedNodes: string[];
     /**
-     * Specifies the CSS classes to be added with root element of the TreeView to help customize the appearance of the component.
-     *
+     * Specifies one or more than one CSS classes to be added with root element of the TreeView to help customize the appearance of the component.
+     * ```html
+     * <div id="tree"></div>
+     * ```
+     * ```typescript
+     * let treeObj: TreeView = new TreeView({
+     * fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
+     * cssClass: 'e-custom e-tree'
+     * });
+     * treeObj.appendTo('#tree');
+     * ```
+     * ```css
+     * .e-custom .e-tree {
+     * max-width: 600px;
+     * }
+     * .e-custom .e-list-item {
+     * padding: 10px 0;
+     * }
+     * ```
      * @default ''
      */
     cssClass: string;
@@ -588,15 +620,40 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      */
     disabled: boolean;
     /**
-     * Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted
-     * for the draggable element movement. By default, the draggable element movement occurs in the entire page.
-     *
+     * Specifies the target in which the draggable element can be moved and dropped.
+     * By default, the draggable element movement occurs in the page.
+     * ```html
+     * <div id="tree"></div>
+     * ```
+     * ```typescript
+     * let treeObj: TreeView = new TreeView({
+     * fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
+     * dragArea: '.control_wrapper'
+     * });
+     * treeObj.appendTo('#tree');
+     * ```
+     * ```css
+     * .control_wrapper {
+     * width: 500px;
+     * margin-left: 100px;
+     * }
+     * ```
      * @default null
      */
     dragArea: HTMLElement | string;
     /**
-     * Defines whether to allow the cross-scripting site or not.
-     *
+     * Specifies whether to allow rendering of untrusted HTML values in the TreeView component.
+     * While enable this property, it sanitize suspected untrusted strings and script, and update in the TreeView component.
+     * ```html
+     * <div id="tree"></div>
+     * ```
+     * ```typescript
+     * let treeObj: TreeView = new TreeView({
+     * fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
+     * enableHtmlSanitizer: true
+     * });
+     * treeObj.appendTo('#tree');
+     * ```
      * @default false
      */
     enableHtmlSanitizer: boolean;
@@ -612,19 +669,39 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     /**
      * Represents the expanded nodes in the TreeView component. We can set the nodes that need to be
      * expanded or get the ID of the nodes that are currently expanded by using this property.
-     *
+     * ```html
+     * <div id='tree'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var treeObj =  new TreeView({
+     * fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
+     * expandedNodes: ['01','01-01','02']
+     * });
+     * treeObj.appendTo('#tree');
+     * </script>
+     * ```
      * @default []
      */
     expandedNodes: string[];
     /**
-     * Specifies the action on which the node expands or collapses. The available actions are,
-     * * `Auto` - In desktop, the expand/collapse operation happens when you double-click the node, and in mobile devices it
-     * happens on single-click.
-     * * `Click` - The expand/collapse operation happens when you single-click the node in both desktop and mobile devices.
-     * * `DblClick` - The expand/collapse operation happens when you double-click the node in both desktop and mobile devices.
-     * * `None` - The expand/collapse operation will not happen when you single-click or double-click the node in both desktop
-     *  and mobile devices.
-     *
+     * Specifies the action on which the node expands or collapses.
+     * The available actions :
+     * `Click` - The expand/collapse operation happens when you single-click on the node in desktop.
+     * `DblClick` - The expand/collapse operation happens when you double-click on the node in desktop.
+     * `None` - The expand/collapse operation will not happen.
+     * In mobile devices, the node expand/collapse action happens on single tap.
+     * Here ExpandOn attribute is set to single click property also can use double click and none property.
+     * ```html
+     * <div id="tree"></div>
+     * ```
+     * ```typescript
+     * let treeObj: TreeView = new TreeView({
+     * fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
+     * expandOn: 'Click'
+     * });
+     * treeObj.appendTo('#tree');
+     * ```
      * @default 'Auto'
      */
     expandOn: ExpandOnSettings;
@@ -675,7 +752,17 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * it we can select only a single node.
      * For more information on selectedNodes, refer to
      * [selectedNodes](../../treeview/multiple-selection#selected-nodes).
-     *
+     * ```html
+     * <div id="tree"></div>
+     * ```
+     * ```typescript
+     * let treeObj: TreeView = new TreeView({
+     * fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' },
+     * allowMultiSelection: true,
+     * selectedNodes: ['01','02']
+     * });
+     * treeObj.appendTo('#tree');
+     * ```
      * @default []
      */
     selectedNodes: string[];
@@ -710,135 +797,135 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      */
     fullRowNavigable: boolean;
     /**
-     * Triggers when any TreeView action failed to fetch the desired results.
+     * Event callback that is raised while any TreeView action failed to fetch the desired results.
      *
      * @event
      */
     actionFailure: EmitType<FailureEventArgs>;
     /**
-     * Triggers when the TreeView control is created successfully.
+     * Event callback that is raised when the TreeView component is created successfully.
      *
      * @event
      */
     created: EmitType<Object>;
     /**
-     * Triggers when data source is populated in the TreeView.
+     * Event callback that is raised when data source is populated in the TreeView.
      *
      * @event
      */
     dataBound: EmitType<DataBoundEventArgs>;
     /**
-     * Triggers when data source is changed in the TreeView. The data source will be changed after performing some operation like
+     * Event callback that is raised when data source is changed in the TreeView. The data source will be changed after performing some operation like
      * drag and drop, node editing, adding and removing node.
      *
      * @event
      */
     dataSourceChanged: EmitType<DataSourceChangedEventArgs>;
     /**
-     * Triggers before the TreeView node is appended to the TreeView element. It helps to customize specific nodes.
+     * Event callback that is raised before the TreeView node is appended to the TreeView element. It helps to customize specific nodes.
      *
      * @event
      */
     drawNode: EmitType<DrawNodeEventArgs>;
     /**
-     * Triggers when the TreeView control is destroyed successfully.
+     * Event callback that is raised when the TreeView control is destroyed successfully.
      *
      * @event
      */
     destroyed: EmitType<Object>;
     /**
-     * Triggers when key press is successful. It helps to customize the operations at key press.
+     * Event callback that is raised when key press is successful. It helps to customize the operations at key press.
      *
      * @event
      */
     keyPress: EmitType<NodeKeyPressEventArgs>;
     /**
-     * Triggers when the TreeView node is checked/unchecked successfully.
+     * Event callback that is raised when the TreeView node is checked/unchecked successfully.
      *
      * @event
      */
     nodeChecked: EmitType<NodeCheckEventArgs>;
     /**
-     * Triggers before the TreeView node is to be checked/unchecked.
+     * Event callback that is raised before the TreeView node is to be checked/unchecked.
      *
      * @event
      */
     nodeChecking: EmitType<NodeCheckEventArgs>;
     /**
-     * Triggers when the TreeView node is clicked successfully.
+     * Event callback that is raised when the TreeView node is clicked successfully.
      *
      * @event
      */
     nodeClicked: EmitType<NodeClickEventArgs>;
     /**
-     * Triggers when the TreeView node collapses successfully.
+     * Event callback that is raised when the TreeView node collapses successfully.
      *
      * @event
      */
     nodeCollapsed: EmitType<NodeExpandEventArgs>;
     /**
-     * Triggers before the TreeView node collapses.
+     * Event callback that is raised before the TreeView node collapses.
      *
      * @event
      */
     nodeCollapsing: EmitType<NodeExpandEventArgs>;
     /**
-     * Triggers when the TreeView node is dragged (moved) continuously.
+     * Event callback that is raised when the TreeView node is dragged (moved) continuously.
      *
 
      * @event
      */
     nodeDragging: EmitType<DragAndDropEventArgs>;
     /**
-     * Triggers when the TreeView node drag (move) starts.
+     * Event callback that is raised when the TreeView node drag (move) starts.
      *
      * @event
      */
     nodeDragStart: EmitType<DragAndDropEventArgs>;
     /**
-     * Triggers when the TreeView node drag (move) is stopped.
+     * Event callback that is raised when the TreeView node drag (move) is stopped.
      *
      * @event
      */
     nodeDragStop: EmitType<DragAndDropEventArgs>;
     /**
-     * Triggers when the TreeView node is dropped on target element successfully.
+     * Event callback that is raised when the TreeView node is dropped on target element successfully.
      *
      * @event
      */
     nodeDropped: EmitType<DragAndDropEventArgs>;
     /**
-     * Triggers when the TreeView node is renamed successfully.
+     * Event callback that is raised when the TreeView node is renamed successfully.
      *
      * @event
      */
     nodeEdited: EmitType<NodeEditEventArgs>;
     /**
-     * Triggers before the TreeView node is renamed.
+     * Event callback that is raised before the TreeView node is renamed.
      *
      * @event
      */
     nodeEditing: EmitType<NodeEditEventArgs>;
     /**
-     * Triggers when the TreeView node expands successfully.
+     * Event callback that is raised when the TreeView node expands successfully.
      *
      * @event
      */
     nodeExpanded: EmitType<NodeExpandEventArgs>;
     /**
-     * Triggers before the TreeView node is to be expanded.
+     * Event callback that is raised before the TreeView node is to be expanded.
      *
      * @event
      */
     nodeExpanding: EmitType<NodeExpandEventArgs>;
     /**
-     * Triggers when the TreeView node is selected/unselected successfully.
+     * Event callback that is raised when the TreeView node is selected/unselected successfully.
      *
      * @event
      */
     nodeSelected: EmitType<NodeSelectEventArgs>;
     /**
-     * Triggers before the TreeView node is selected/unselected.
+     * Event callback that is raised before the TreeView node is selected/unselected.
      *
      * @event
      */
@@ -1148,8 +1235,8 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
         [key: string]: Object;
     }[], target?: string | Element, index?: number, preventTargetExpand?: boolean): void;
     /**
-     * Instead of clicking on the TreeView node for editing, we can enable it by using
-     * `beginEdit` property. On passing the node ID or element through this property, the edit textBox
+     * Editing can also be enabled by using the `beginEdit` property, instead of clicking on the
+     * TreeView node. On passing the node ID or element through this property, the edit textBox
      * will be created for the particular node thus allowing us to edit it.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
      */
@@ -1204,7 +1291,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     */
     getDisabledNodes(): string[];
     /**
-     * Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
+     * Gets the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
      */
     getNode(node: string | Element): {

package/src/treeview/treeview.js

@@ -80,6 +80,7 @@ var SMALL = 'e-small';
 var CHILD = 'e-has-child';
 var ITEM_ANIMATION_ACTIVE = 'e-animation-active';
 var DISABLED = 'e-disabled';
+var PREVENTSELECT = 'e-prevent';
 var treeAriaAttr = {
     treeRole: 'group',
     itemRole: 'treeitem',
@@ -128,6 +129,9 @@ var FieldsSettings = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], FieldsSettings.prototype, "query", void 0);
+    __decorate([
+        Property('selectable')
+    ], FieldsSettings.prototype, "selectable", void 0);
     __decorate([
         Property('selected')
     ], FieldsSettings.prototype, "selected", void 0);
@@ -187,11 +191,11 @@ export { NodeAnimationSettings };
  * The TreeView component is used to represent hierarchical data in a tree like structure with advanced
  * functions to perform edit, drag and drop, selection with check-box, and more.
  * ```html
- *  <div id="tree"></div>
+ * <div id="tree"></div>
  * ```
  * ```typescript
- *  let treeObj: TreeView = new TreeView();
- *  treeObj.appendTo('#tree');
+ * let treeObj: TreeView = new TreeView();
+ * treeObj.appendTo('#tree');
  * ```
  */
 var TreeView = /** @class */ (function (_super) {
@@ -210,7 +214,7 @@ var TreeView = /** @class */ (function (_super) {
         _this.changeDataSource = false;
         _this.hasTemplate = false;
         _this.isFirstRender = false;
-        // Specifies whether the node is dropped or not 
+        // Specifies whether the node is dropped or not
         _this.isNodeDropped = false;
         _this.mouseDownStatus = false;
         return _this;
@@ -262,7 +266,9 @@ var TreeView = /** @class */ (function (_super) {
             csEnter: 'ctrl+shift+enter',
             csHome: 'ctrl+shift+home',
             csEnd: 'ctrl+shift+end',
-            space: 'space'
+            space: 'space',
+            shiftSpace: 'shift+space',
+            ctrlSpace: 'ctrl+space'
         };
         this.listBaseOption = {
             expandCollapse: true,
@@ -786,6 +792,10 @@ var TreeView = /** @class */ (function (_super) {
         };
         if (!this.isRefreshed) {
             this.trigger('drawNode', eventArgs);
+            if (e.curData[this.fields.selectable] === false && !this.showCheckBox) {
+                e.item.classList.add(PREVENTSELECT);
+                e.item.firstElementChild.setAttribute('style', 'cursor: not-allowed');
+            }
         }
     };
     TreeView.prototype.frameMouseHandler = function (e) {
@@ -1475,7 +1485,7 @@ var TreeView = /** @class */ (function (_super) {
         else {
             var classList = target.classList;
             var li = closest(target, '.' + LISTITEM);
-            if (!li) {
+            if (!li || (li.classList.contains(PREVENTSELECT) && !(classList.contains(EXPANDABLE) || classList.contains(COLLAPSIBLE)))) {
                 return;
             }
             else if (event.originalEvent.which !== 3) {
@@ -1950,7 +1960,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.isLoaded) {
             eventArgs = this.getSelectEvent(li, 'select', e);
             this.trigger('nodeSelecting', eventArgs, function (observedArgs) {
-                if (!observedArgs.cancel) {
+                if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
                     _this.nodeSelectAction(li, e, observedArgs, multiSelect);
                 }
             });
@@ -2168,6 +2178,9 @@ var TreeView = /** @class */ (function (_super) {
                         if (_this.showCheckBox) {
                             _this.checkNode(e);
                         }
+                        else {
+                            _this.toggleSelect(focusedNode, e);
+                        }
                         break;
                     case 'moveRight':
                         _this.openNode(_this.enableRtl ? false : true, e);
@@ -2207,6 +2220,8 @@ var TreeView = /** @class */ (function (_super) {
                     case 'ctrlEnter':
                     case 'shiftEnter':
                     case 'csEnter':
+                    case 'shiftSpace':
+                    case 'ctrlSpace':
                         _this.toggleSelect(focusedNode, e);
                         break;
                     case 'f2':
@@ -2600,7 +2615,7 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.setFocus = function (preNode, nextNode) {
         removeClass([preNode], [HOVER, FOCUS]);
-        if (!nextNode.classList.contains('e-disable')) {
+        if (!nextNode.classList.contains('e-disable') && !nextNode.classList.contains(PREVENTSELECT)) {
             addClass([nextNode], [HOVER, FOCUS]);
             this.updateIdAttr(preNode, nextNode);
         }
@@ -2637,7 +2652,7 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.setHover = function (li) {
-        if (!li.classList.contains(HOVER)) {
+        if (!li.classList.contains(HOVER) && !li.classList.contains(PREVENTSELECT)) {
             this.removeHover();
             addClass([li], HOVER);
         }
@@ -2661,6 +2676,7 @@ var TreeView = /** @class */ (function (_super) {
             var pNode = closest(currLi.parentNode, '.' + LISTITEM);
             var pid = pNode ? pNode.getAttribute('data-uid') : null;
             var selected = currLi.classList.contains(ACTIVE);
+            var selectable = currLi.classList.contains(PREVENTSELECT) ? false : true;
             var expanded = (currLi.getAttribute('aria-expanded') === 'true') ? true : false;
             var hasChildren = currLi.getAttribute('aria-expanded') !== null ? true : (select('.' + EXPANDABLE, currLi) || select('.' + COLLAPSIBLE, currLi)) != null ? true : false;
             var checked = null;
@@ -2669,7 +2685,7 @@ var TreeView = /** @class */ (function (_super) {
                 checked = checkboxElement.getAttribute('aria-checked');
             }
             return {
-                id: id, text: text, parentID: pid, selected: selected, expanded: expanded,
+                id: id, text: text, parentID: pid, selected: selected, selectable: selectable, expanded: expanded,
                 isChecked: checked, hasChildren: hasChildren
             };
         }
@@ -3698,7 +3714,7 @@ var TreeView = /** @class */ (function (_super) {
             dropUl = dropEle;
         }
         refNode = dropUl.childNodes[index];
-        if (!this.isFirstRender || (this.dataType === 1)) {
+        if (!this.isFirstRender || this.dataType === 1) {
             if (refNode || this.sortOrder === 'None') {
                 for (var i = 0; i < li.length; i++) {
                     dropUl.insertBefore(li[i], refNode);
@@ -4631,8 +4647,8 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     /**
-     * Instead of clicking on the TreeView node for editing, we can enable it by using
-     * `beginEdit` property. On passing the node ID or element through this property, the edit textBox
+     * Editing can also be enabled by using the `beginEdit` property, instead of clicking on the
+     * TreeView node. On passing the node ID or element through this property, the edit textBox
      * will be created for the particular node thus allowing us to edit it.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
      */
@@ -4743,7 +4759,7 @@ var TreeView = /** @class */ (function (_super) {
         return disabledNodes;
     };
     /**
-     * Get the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
+     * Gets the node's data such as id, text, parentID, selected, isChecked, and expanded by passing the node element or it's ID.
      * @param  {string | Element} node - Specifies ID of TreeView node/TreeView node.
      */
     TreeView.prototype.getNode = function (node) {

package/styles/accordion/_bootstrap-dark-definition.scss

@@ -2,9 +2,12 @@
 $acrdn-skin: 'bootstrap' !default;
 $acrdn-header-font-weight: normal !default;
 $acrdn-icon-font-size: $font-size !default;
+$acrdn-bgr-arrow-icon-font-size: 12px !default;
+$acrdn-bgr-item-header-content-font-size: 14px !default;
 $acrdn-content-line-height: 1.5 !default;
 $acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $acrdn-border-size: $border-size !default;
+$acrdn-border-radius: 0 !default;
 $acrdn-active-bg: $grey-88 !default;
 $acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-item-select-bg: $grey-base !default;
@@ -20,6 +23,20 @@ $acrdn-bgr-header-lineheight: 48px !default;
 $acrdn-nrml-header-paddingpix: 15px !default;
 $acrdn-bgr-header-paddingpix: 15px !default;
 
+$acrdn-item-hdr-con-lineheight: 39px !default;
+$acrdn-item-selected-first-child-border-top: 1px solid $grey-99 !default;
+$acrdn-item-selected-last-child-border-bottom: 1px solid $grey-99 !default;
+$acrdn-item-border-radius: 4px !default;
+$acrdn-item-margin-top: 5px !default;
+$acrdn-item-nested-panel-item-select-margin: 2px !default;
+$acrdn-item-overflow: hidden !default;
+$acrdn-item-hover-focus-hdr-con-text-decoration: underline !default;
+$acrdn-item-hdr-border-radius: 4px !default;
+$acrdn-item-hdr-margin-bottom: 0 !default;
+$acrdn-item-tgl-icon-display: none !default;
+$acrdn-item-arrow-icon-font-size: 12px !default;
+$acrdn-opacity: .5 !default;
+
 // Header, Nested header and RTL mode Padding
 $acrdn-nrml-header-padding: 0 30px 0 15px !default;
 $acrdn-bgr-header-padding: 0 30px 0 15px !default;
@@ -72,4 +89,87 @@ $acrdn-icon-color: lighten($brand-primary, 15%) !default;
 $acrdn-selected-header-font-color: $grey-dark-font !default;
 $acrdn-selected-icon-color: $grey-light-font !default;
 
+$acrdn-item-border-color: $grey-99 !default;
+$acrdn-item-border-nav-type: solid !default;
+$acrdn-item-border-size: 0 !default;
+$acrdn-item-select-last-child-border-bottom: 1px solid $grey-99 !default;
+$acrdn-item-select-last-child-border-radius: 4px !default;
+$acrdn-item-first-child-hdr-focus-border-radius: 4px !default;
+$acrdn-item-last-child-border-bottom: 0 !default;
+$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 4px !default;
+$acrdn-item-focus-border-color: $grey-99 !default;
+$acrdn-item-focus-border-size: 0 !default;
+$acrdn-item-focus-selected-exp-border-top: 1px solid $grey-99 !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-color: $grey-99 !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-type: solid !default;
+$acrdn-item-focus-selected-exp-hdr-focus-border-size: 0 0 1px 0 !default;
+$acrdn-item-focus-exp-hdr-hover-focus-bg-color: transparent !default;
+$acrdn-item-focus-exp-hdr-hover-focus-color: $acrdn-selected-header-font-color !default;
+$acrdn-item-focus-selected-hdr-icons-font: $acrdn-selected-icon-color !default;
+$acrdn-item-focus-exp-hdricon-hover-font: $acrdn-selected-header-font-color !default;
+$acrdn-item-focus-selected-exp-border-color: $grey-99 !default;
+$acrdn-item-exp-select-border-color: $grey-99 !default;
+$acrdn-item-exp-select-border-size: 1px !default;
+$acrdn-item-header-border: 0 !default;
+$acrdn-item-select-exp-hdr-con-disable-font: $acrdn-selected-header-font-color !default;
+$acrdn-item-header-content-disable-color: $acrdn-header-font !default;
+$acrdn-item-hdr-con-text-disabled-font: $grey-dark-font !default;
+$acrdn-item-icon-disable-color: $grey-dark-font !default;
+$acrdn-item-selected-exp-hdr-focus-border-color: $grey-99 !default;
+$acrdn-item-selected-exp-hdr-focus-border-type: solid !default;
+$acrdn-item-selected-exp-hdr-focus-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-exp-hdr-focus-bg: transparent !default;
+$acrdn-item-selected-exp-hdr-hover-bg: $grey-88 !default;
+$acrdn-item-selected-exp-hdr-active-bg: $grey-88 !default;
+$acrdn-item-nes-pan-con-last-child-border-bottom: 1px solid $grey-99 !default;
+$acrdn-item-select-bg: $gray-base !default;
+$acrdn-item-select-border-color: $grey-99 !default;
+$acrdn-item-select-border-size: 1px !default;
+$acrdn-item-panel-content-select-bg: none !default;
+$acrdn-item-panel-content-select-border-top: 0 !default;
+$acrdn-item-header-hover-border: 0 !default;
+$acrdn-item-header-hover-bg: transparent !default;
+$acrdn-item-header-hover-border-color: initial !default;
+$acrdn-item-header-active-border: 0 !default;
+$acrdn-item-header-active-border-color: initial !default;
+$acrdn-item-header-focus-border: 0 !default;
+$acrdn-item-header-focus-box-shadow: none !default;
+$acrdn-item-header-focus-bg: transparent !default;
+$acrdn-item-header-focus-active-color: $acrdn-header-font !default;
+$acrdn-item-select-exp-hdr-hover-color: $acrdn-header-font !default;
+$acrdn-item-selected-exp-hdr-border-color: $grey-99 !default;
+$acrdn-item-selected-exp-hdr-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-exp-hdr-bg: $grey-88 !default;
+$acrdn-item-selected-exp-hdr-hover-color: $grey-light-font !default;
+$acrdn-item-selected-exp-hdr-hover-focus-color: $grey-dark-font !default;
+$acrdn-item-selected-exp-hdr-icon-color: $grey-dark-font !default;
+$acrdn-item-selected-exp-hdr-hover-border-color: $grey-99 !default;
+$acrdn-item-selected-tgl-icon-color: $grey-light-font !default;
+$acrdn-item-selected-hdr-font: $grey-dark-font !default;
+$acrdn-item-select-hdr-focus-border-color: $grey-99 !default;
+$acrdn-item-selected-border-color: $grey-99 !default;
+$acrdn-item-selected-border-size: 1px !default;
+$acrdn-item-selected-select-last-border-bottom: 1px solid $grey-99 !default;
+$acrdn-item-selected-selected-border-color: $grey-99 !default;
+$acrdn-item-selected-selected-border-size: 0 1px 1px 1px !default;
+$acrdn-item-selected-header-background: $grey-88 !default;
+$acrdn-item-selected-hdr-border-color: $grey-99 !default;
+$acrdn-item-selected-hdr-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-header-border-radius: 0 !default;
+$acrdn-item-selected-hdr-con-font: $acrdn-header-font !default;
+$acrdn-item-selected-select-border-color: $grey-99 !default;
+$acrdn-item-selected-select-border-size: 1px 0 1px 0 !default;
+$acrdn-item-selected-hdr-icon-font: $acrdn-header-font !default;
+$acrdn-item-selected-exp-hdr-con-hover-color: $grey-dark-font !default;
+$acrdn-item-selected-exp-hdr-icon-hover-color: $grey-dark-font !default;
+$acrdn-item-selected-select-active-bg: $gray-base !default;
+$acrdn-item-nes-pan-exp-hdr-color: $grey-dark-font !default;
+$acrdn-item-selected-hdr-hover-border-color: $grey-99 !default;
+$acrdn-item-selected-hdr-tgl-icon-hover-font: $acrdn-header-font !default;
+$acrdn-item-nes-selected-exp-hover-hdr-icons-font: $grey-light-font !default;
+$acrdn-item-nes-selected-exp-hover-hdr-con-font: $grey-dark-font !default;
+$acrdn-item-exp-not-selected-hdr-focus-bg: transparent !default;
+$acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
+$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+
 //enddefault