@3t-transform/threeteeui 0.1.52 → 0.1.57

package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts

@@ -1,69 +1,69 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-export type DateSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
-export type MonthSyntax = `${number}${number}${number}${number}-${number}${number}`;
-export type WeekSyntax = `${number}${number}${number}${number}-W${number}${number}`;
-export type TimeSyntax = `${number}${number}:${number}${number}`;
-export type DateTimeLocalSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}`;
-export type MinMaxDates = DateSyntax | MonthSyntax | WeekSyntax | TimeSyntax | DateTimeLocalSyntax;
-export declare class TttxInput {
-  label: string;
-  /**
-   * Footnote under the input field
-   */
-  secondarylabel: string;
-  showerrormsg: boolean;
-  showerrorbubble: boolean;
-  errormsg: string;
-  iconleft: string;
-  iconleftcolor: string;
-  iconright: string;
-  iconrightcolor: string;
-  inputicon: string;
-  inputiconcolor: string;
-  inline: boolean;
-  inputautocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
-  inputautofocus: boolean;
-  /**
-   * Defines what action to present for the enter key on virtual keyboards
-   */
-  inputkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
-  /**
-   * tabindex - Allows the HTML elements to be focusable
-   * @example <caption>In HTML (like `index.html`)</caption>
-   * <tttx-standalone-input input-index="1" />
-   * @example <caption>In TSX files</caption>
-   * <tttx-standalone-input inputindex={1} />
-   */
-  inputindex: string | number;
-  inputtitle: string;
-  autocomplete: 'off' | 'on';
-  checked: boolean;
-  disabled: boolean;
-  max: MinMaxDates | number;
-  maxlength: string | number;
-  min: MinMaxDates | number;
-  minlength: string | number;
-  name: string;
-  pattern: string;
-  placeholder: string;
-  readonly: string | boolean;
-  required: boolean;
-  step: string | number;
-  type: string;
-  value: string | number;
-  valueChanged: EventEmitter<string>;
-  handleChange(event: Event | InputEvent): void;
-  focusChanged: EventEmitter<string>;
-  handleFocus(event: Event | InputEvent): void;
-  blurChanged: EventEmitter<string>;
-  handleBlur(event: Event | InputEvent): void;
-  invalidChanged: EventEmitter<string>;
-  handleInvalid(event: Event | InputEvent): void;
-  inputIconClick: EventEmitter<void>;
-  handleInputIconClick(event: PointerEvent): void;
-  leftIconClick: EventEmitter<void>;
-  handleLeftIconClick(event: PointerEvent): void;
-  rightIconClick: EventEmitter<void>;
-  handleRightIconClick(event: PointerEvent): void;
-  render(): any;
-}
+import { EventEmitter } from '../../../stencil-public-runtime';
+export type DateSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
+export type MonthSyntax = `${number}${number}${number}${number}-${number}${number}`;
+export type WeekSyntax = `${number}${number}${number}${number}-W${number}${number}`;
+export type TimeSyntax = `${number}${number}:${number}${number}`;
+export type DateTimeLocalSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}`;
+export type MinMaxDates = DateSyntax | MonthSyntax | WeekSyntax | TimeSyntax | DateTimeLocalSyntax;
+export declare class TttxInput {
+  label: string;
+  /**
+   * Footnote under the input field
+   */
+  secondarylabel: string;
+  showerrormsg: boolean;
+  showerrorbubble: boolean;
+  errormsg: string;
+  iconleft: string;
+  iconleftcolor: string;
+  iconright: string;
+  iconrightcolor: string;
+  inputicon: string;
+  inputiconcolor: string;
+  inline: boolean;
+  inputautocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+  inputautofocus: boolean;
+  /**
+   * Defines what action to present for the enter key on virtual keyboards
+   */
+  inputkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+  /**
+   * tabindex - Allows the HTML elements to be focusable
+   * @example <caption>In HTML (like `index.html`)</caption>
+   * <tttx-standalone-input input-index="1" />
+   * @example <caption>In TSX files</caption>
+   * <tttx-standalone-input inputindex={1} />
+   */
+  inputindex: string | number;
+  inputtitle: string;
+  autocomplete: 'off' | 'on';
+  checked: boolean;
+  disabled: boolean;
+  max: MinMaxDates | number;
+  maxlength: string | number;
+  min: MinMaxDates | number;
+  minlength: string | number;
+  name: string;
+  pattern: string;
+  placeholder: string;
+  readonly: string | boolean;
+  required: boolean;
+  step: string | number;
+  type: string;
+  value: string | number;
+  valueChanged: EventEmitter<string>;
+  handleChange(event: Event | InputEvent): void;
+  focusChanged: EventEmitter<string>;
+  handleFocus(event: Event | InputEvent): void;
+  blurChanged: EventEmitter<string>;
+  handleBlur(event: Event | InputEvent): void;
+  invalidChanged: EventEmitter<string>;
+  handleInvalid(event: Event | InputEvent): void;
+  inputIconClick: EventEmitter<void>;
+  handleInputIconClick(event: PointerEvent): void;
+  leftIconClick: EventEmitter<void>;
+  handleLeftIconClick(event: PointerEvent): void;
+  rightIconClick: EventEmitter<void>;
+  handleRightIconClick(event: PointerEvent): void;
+  render(): any;
+}

package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts

@@ -1,143 +1,143 @@
-declare const _default: {
-  title: string;
-  component: string;
-  argTypes: {
-    iconleft: {
-      options: string[];
-      control: {
-        type: string;
-      };
-    };
-    iconleftcolor: {
-      control: {
-        type: string;
-      };
-    };
-    iconright: {
-      options: string[];
-      control: {
-        type: string;
-      };
-    };
-    iconrightcolor: {
-      control: {
-        type: string;
-      };
-    };
-    inputicon: {
-      options: string[];
-      control: {
-        type: string;
-      };
-    };
-    inputiconcolor: {
-      control: {
-        type: string;
-      };
-    };
-    label: {
-      control: {
-        type: string;
-      };
-    };
-    secondarylabel: {
-      control: {
-        type: string;
-      };
-    };
-    errormsg: {
-      control: {
-        type: string;
-      };
-    };
-    showerrorbubble: {
-      control: {
-        type: string;
-      };
-    };
-    showerrormsg: {
-      control: {
-        type: string;
-      };
-    };
-    inline: {
-      control: {
-        type: string;
-      };
-    };
-    checked: {
-      control: {
-        type: string;
-      };
-    };
-    disabled: {
-      control: {
-        type: string;
-      };
-    };
-    max: {
-      control: {
-        type: string;
-      };
-    };
-    maxlength: {
-      control: {
-        type: string;
-      };
-    };
-    min: {
-      control: {
-        type: string;
-      };
-    };
-    minlength: {
-      control: {
-        type: string;
-      };
-    };
-    name: {
-      control: {
-        type: string;
-      };
-    };
-    pattern: {
-      control: {
-        type: string;
-      };
-    };
-    placeholder: {
-      control: {
-        type: string;
-      };
-    };
-    readonly: {
-      control: {
-        type: string;
-      };
-    };
-    required: {
-      control: {
-        type: string;
-      };
-    };
-    step: {
-      control: {
-        type: string;
-      };
-    };
-    type: {
-      options: string[];
-      control: {
-        type: string;
-      };
-    };
-    value: {
-      control: {
-        type: string;
-      };
-    };
-  };
-};
-export default _default;
-export declare const InputField: any;
-export declare const searchField: any;
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    iconleft: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    iconleftcolor: {
+      control: {
+        type: string;
+      };
+    };
+    iconright: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    iconrightcolor: {
+      control: {
+        type: string;
+      };
+    };
+    inputicon: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    inputiconcolor: {
+      control: {
+        type: string;
+      };
+    };
+    label: {
+      control: {
+        type: string;
+      };
+    };
+    secondarylabel: {
+      control: {
+        type: string;
+      };
+    };
+    errormsg: {
+      control: {
+        type: string;
+      };
+    };
+    showerrorbubble: {
+      control: {
+        type: string;
+      };
+    };
+    showerrormsg: {
+      control: {
+        type: string;
+      };
+    };
+    inline: {
+      control: {
+        type: string;
+      };
+    };
+    checked: {
+      control: {
+        type: string;
+      };
+    };
+    disabled: {
+      control: {
+        type: string;
+      };
+    };
+    max: {
+      control: {
+        type: string;
+      };
+    };
+    maxlength: {
+      control: {
+        type: string;
+      };
+    };
+    min: {
+      control: {
+        type: string;
+      };
+    };
+    minlength: {
+      control: {
+        type: string;
+      };
+    };
+    name: {
+      control: {
+        type: string;
+      };
+    };
+    pattern: {
+      control: {
+        type: string;
+      };
+    };
+    placeholder: {
+      control: {
+        type: string;
+      };
+    };
+    readonly: {
+      control: {
+        type: string;
+      };
+    };
+    required: {
+      control: {
+        type: string;
+      };
+    };
+    step: {
+      control: {
+        type: string;
+      };
+    };
+    type: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    value: {
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const InputField: any;
+export declare const searchField: any;

package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.d.ts

@@ -1,4 +1,4 @@
-export declare class TttxToolbar {
-  border: boolean;
-  render(): any;
-}
+export declare class TttxToolbar {
+  border: boolean;
+  render(): any;
+}

package/dist/types/components/molecules/tttx-toolbar/tttx-toolbar.stories.d.ts

@@ -1,13 +1,13 @@
-declare const _default: {
-  title: string;
-  component: string;
-  argTypes: {
-    border: {
-      control: {
-        type: string;
-      };
-    };
-  };
-};
-export default _default;
-export declare const BasicStringList: any;
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    border: {
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const BasicStringList: any;

package/dist/types/components/palette.stories.d.ts

@@ -1,6 +1,6 @@
-declare const _default: {
-  title: string;
-  component: string;
-};
-export default _default;
-export declare const Default: any;
+declare const _default: {
+  title: string;
+  component: string;
+};
+export default _default;
+export declare const Default: any;

package/dist/types/components.d.ts

@@ -244,6 +244,7 @@ declare namespace LocalJSX {
         "filterKey"?: string;
         "filterOptions"?: string | FilterSettings[];
         "onFilterChangeEvent"?: (event: TttxFilterCustomEvent<FilterChangeEvent>) => void;
+        "onToggleFilter"?: (event: TttxFilterCustomEvent<boolean>) => void;
         "popoverWidth"?: string;
         "showOptionIcons"?: boolean;
         "showSearchField"?: boolean;
@@ -281,6 +282,7 @@ declare namespace LocalJSX {
         "defaultSortDirection"?: 'ascending' | 'descending';
         "fieldOptionsData"?: string | SorterData;
         "onSorterChangeEvent"?: (event: TttxSorterCustomEvent<SorterChangeEvent>) => void;
+        "onToggleSorter"?: (event: TttxSorterCustomEvent<boolean>) => void;
         "sorterKey"?: string;
     }
     interface TttxStandaloneInput {

package/dist/types/docs/gettingstarted-developer.stories.d.ts

@@ -1,5 +1,5 @@
-declare const _default: {
-  title: string;
-};
-export default _default;
-export declare const Default: any;
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const Default: any;

package/dist/types/icons.d.ts

@@ -1,2 +1,2 @@
-declare const icons: string[];
-export default icons;
+declare const icons: string[];
+export default icons;

package/dist/types/index.d.ts

@@ -1 +1 @@
-export { Components, JSX } from './components';
+export { Components, JSX } from './components';

package/dist/types/shared/domsanitiser.options.d.ts

@@ -1,10 +1,10 @@
-declare function tagRegXp(tagName: string): RegExpExecArray;
-declare function attributeNameCheck(): boolean;
-declare const domSanitiserOptions: {
-  CUSTOM_ELEMENT_HANDLING: {
-    tagNameCheck: typeof tagRegXp;
-    attributeNameCheck: typeof attributeNameCheck;
-    allowCustomizedBuiltInElements: boolean;
-  };
-};
-export default domSanitiserOptions;
+declare function tagRegXp(tagName: string): RegExpExecArray;
+declare function attributeNameCheck(): boolean;
+declare const domSanitiserOptions: {
+  CUSTOM_ELEMENT_HANDLING: {
+    tagNameCheck: typeof tagRegXp;
+    attributeNameCheck: typeof attributeNameCheck;
+    allowCustomizedBuiltInElements: boolean;
+  };
+};
+export default domSanitiserOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.1.52",
+    "version": "0.1.57",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/tttx/p-3b29e8af.entry.js

@@ -1 +0,0 @@
-import{r as o,c as t,h as r,H as e,g as i}from"./p-c544551b.js";const n=class{constructor(r){o(this,r),this.sorterChangeEvent=t(this,"sorterChangeEvent",7),this.sorterKey=void 0,this.defaultSortDirection="descending",this.fieldOptionsData=null,this.defaultOption="",this.selectedField=this.defaultOption,this.sortDirection=this.defaultSortDirection,this.dropdownExpand=!1,this.dropdownOptions=void 0}handleCloseSorter(){this.dropdownExpand=!1}emitSortEvent(){this.sorterChangeEvent.emit({sorterDirection:this.sortDirection,sorterKey:this.sorterKey,sortField:this.selectedField})}onSortToggleClick(o){o.preventDefault(),this.sortDirection="ascending"==this.sortDirection?"descending":"ascending",this.emitSortEvent()}onDropdownClicked(){this.dropdownExpand=!this.dropdownExpand}onDropdownSelected(o){this.dropdownExpand=!1,this.selectedField=o.target.innerHTML,this.emitSortEvent()}render(){const o="string"==typeof this.fieldOptionsData?JSON.parse(this.fieldOptionsData):this.fieldOptionsData;if(!this.fieldOptionsData)return;const t="ascending"==this.sortDirection?"arrow_upward":"arrow_downward",i=this.dropdownExpand?"expand_less":"expand_more",n=this.selectedField;return r(e,{id:`sorter__${this.sorterKey}`},r("div",{tabindex:0,class:"sorter-container "+(this.dropdownExpand?"--expanded":"")},r("button",{class:"arrow-toggle-button",type:"button",onClick:this.onSortToggleClick.bind(this)},r("tttx-icon",{icon:t,color:"black"})),r("div",{class:"dropdown-selector",onClick:this.onDropdownClicked.bind(this)},r("div",{class:"dropdown-selector-button"},r("div",{class:"dropdown-selector-text"},n),r("div",{class:"dropdown-selector-chevron"},r("tttx-icon",{icon:i,color:"black"})))),this.dropdownExpand&&r("div",{class:"dropdown-options-list"},o.sorterOptions.map((o=>r("div",{class:"dropdown-option",tabIndex:-1,onClick:this.onDropdownSelected.bind(this),key:o.optionLabel},o.optionLabel))))))}get el(){return i(this)}};n.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.sorter-container{display:flex;flex-direction:row;position:relative;border:1px solid #d5d5d5;border-radius:4px;font-weight:400;box-sizing:border-box;height:36px;cursor:pointer;width:220px}@media (max-width: 475px){.sorter-container{width:68px}}.sorter-container .arrow-toggle-button{display:inline-flex;justify-content:center;align-items:center;flex-direction:column;background-color:white;border:none;border-bottom-left-radius:4px;border-top-left-radius:4px}@media (max-width: 475px){.sorter-container .arrow-toggle-button{padding-right:0px;padding-left:8px}}.sorter-container .arrow-toggle-button .hydrated{display:flex;justify-content:center;align-items:center;cursor:pointer}.sorter-container .arrow-toggle-button span{display:block;margin:auto;line-height:16px}.sorter-container .arrow-toggle-button .material-symbols-rounded{color:#212121}.sorter-container .dropdown-selector{display:inline-flex;position:relative;flex-grow:1}.sorter-container .dropdown-selector .dropdown-selector-button{display:inline-flex;flex-direction:row;gap:4px;padding-right:4px;align-items:center;color:#212121;width:100%}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-button .dropdown-selector-text{display:none}}.sorter-container .dropdown-selector .dropdown-selector-chevron{display:inline-flex;margin-left:auto;right:0;top:0;flex-direction:row;align-items:center;height:36px}.sorter-container .dropdown-selector .dropdown-selector-chevron .hydrated{height:24px;cursor:pointer}@media (max-width: 475px){.sorter-container .dropdown-selector .dropdown-selector-chevron{padding-right:2px}}.sorter-container .dropdown-options-list{position:absolute;top:36px;left:0;z-index:1;width:220px;line-height:21px;font-size:16px;border-radius:4px;padding-top:8px;padding-bottom:7px;box-shadow:0px 1px 5px #1111114D;box-sizing:border-box;background-color:white}@media (max-width: 475px){.sorter-container .dropdown-options-list{width:220px;padding-top:8px}}.sorter-container .dropdown-options-list .dropdown-option{padding:8px 16px;font-size:16px;line-height:21px}.sorter-container .dropdown-options-list .dropdown-option:hover,.sorter-container .dropdown-options-list .dropdown-option:focus{background-color:#ebfbfc}.sorter-container.--expanded{border-color:#1579c6}@media (max-width: 475px){.sorter-container.--expanded{border:none}}';export{n as tttx_sorter}

package/dist/tttx/p-637e7e88.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as e,H as o,g as n}from"./p-c544551b.js";const r=class{constructor(e){t(this,e),this.filterChangeEvent=i(this,"filterChangeEvent",7),this.filterKey=void 0,this.filterOptions=[{optionIcon:"cancel",optionIconColor:"darkred",optionText:"Expired"},{optionIcon:"warning",optionIconColor:"orange",optionText:"Expiring soon"},{optionIcon:"check_circle",optionIconColor:"green",optionText:"Active"}],this.showSelectAll=!0,this.showSearchField=!1,this.showOptionIcons=!0,this.filterButtonStyle="list filter",this.filterHeader="Qualification status",this.defaultFilterOptions=void 0,this.popoverWidth="193px",this.showPopover=!1,this.displayedFilterSettings=void 0,this.selectedFilters=void 0,this.filterSearchTerm="",this.allSelected=void 0}handleCloseFilter(){this.showPopover=!1}emitFilterEvent(){this.filterChangeEvent.emit({selectedFilters:this.selectedFilters,filterKey:this.filterKey,allSelected:this.allSelected})}onFilterButtonClick(){this.togglePopover()}onCloseButtonClick(){this.togglePopover()}onApplyFilterButtonClick(){this.emitFilterEvent(),this.togglePopover()}onFilterOptionSelected(t){this.allSelected=!1,this.selectedFilters=this.selectedFilters.includes(t)?this.selectedFilters.filter((i=>i!=t)):[...this.selectedFilters,t]}componentWillLoad(){if(this.displayedFilterSettings=this.parseFilterOptions(),void 0!==this.defaultFilterOptions){const t=this.parseDefaultFilterOptions();this.selectedFilters=t;let i=!0;this.parseFilterOptions().map((t=>{this.selectedFilters.includes(t.optionText)||(i=!1)})),this.allSelected=i}else this.allSelected=!0,this.selectedFilters=this.displayedFilterSettings.map((t=>t.optionText))}togglePopover(){this.showPopover=!this.showPopover}handleFilterChange(t){this.filterSearchTerm=t.target.value;const i=this.parseFilterOptions().filter((t=>{const i=t.optionText.toLowerCase(),e=this.filterSearchTerm.toLowerCase();return i.includes(e)}));this.displayedFilterSettings=i}onSelectAllClick(){this.allSelected=!this.allSelected,this.allSelected?this.displayedFilterSettings.forEach((t=>{this.selectedFilters=[...this.selectedFilters,t.optionText]})):this.selectedFilters=[]}getFilterButtonClassName(t){switch(t){case"table icon":return"--table-icon";case"list icon":return"--list-icon";default:return""}}parseFilterOptions(){return"string"==typeof this.filterOptions?JSON.parse(this.filterOptions):this.filterOptions}parseDefaultFilterOptions(){return"string"==typeof this.defaultFilterOptions?JSON.parse(this.defaultFilterOptions):this.defaultFilterOptions}render(){const t=this.showSearchField?"--with-search-field":"",i=this.allSelected?"check_box":"check_box_outline_blank",n=this.allSelected?"blue":"grey",r=this.getFilterButtonClassName(this.filterButtonStyle);return e(o,{id:`filter__${this.filterKey}`},e("div",{class:"filter-container"},e("button",{class:`filter-button ${r}`,type:"button",onClick:this.onFilterButtonClick.bind(this)},e("tttx-icon",{icon:"filter_list",class:"filter-icon",color:"black"}),"Filter"),this.showPopover&&e("div",{class:`filter-popover-container ${t}`,style:{width:this.popoverWidth}},e("div",{class:"filter-header"},this.filterHeader),this.showSearchField?e("div",{class:"search-field-container"},e("tttx-icon",{icon:"search",class:"search-icon"}),e("input",{type:"text",class:"search-input",placeholder:"Search",value:this.filterSearchTerm,onInput:this.handleFilterChange.bind(this)})):"",e("div",{class:"filter-options-container"},this.showSelectAll?e("div",{class:"filter-option",tabIndex:-1,onClick:this.onSelectAllClick.bind(this)},e("tttx-icon",{icon:i,color:n,class:"select-all-icon"}),e("label",{class:"filter-label"},"Select all")):"",this.displayedFilterSettings.map((t=>{const i=this.selectedFilters.includes(t.optionText)?"check_box":"check_box_outline_blank",o=this.selectedFilters.includes(t.optionText)?"blue":"grey";return e("div",{class:"filter-option",tabIndex:-1,onClick:()=>this.onFilterOptionSelected(t.optionText),key:t.optionText},e("tttx-icon",{icon:i,color:o,class:"checkbox-icon"}),this.showOptionIcons&&e("tttx-icon",{icon:t.optionIcon,color:t.optionIconColor}),e("label",{class:"filter-label"},t.optionText))}))),e("div",{class:"filter-popover-button-container"},e("button",{type:"button",class:"close-button",onClick:this.onCloseButtonClick.bind(this)},"Close"),e("button",{type:"button",class:"apply-button",onClick:this.onApplyFilterButtonClick.bind(this)},"Apply")))))}get el(){return n(this)}};r.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.filter-container{background-color:white;position:relative}.filter-container .filter-button{display:inline-flex;justify-content:center;align-items:center;font-size:14px;font-weight:400;font-family:"Roboto", serif;text-transform:uppercase;color:#212121;border:1px solid #d5d5d5;border-radius:4px;background:transparent;height:36px;width:95px;margin:0;padding-right:16px;cursor:pointer}@media (max-width: 475px){.filter-container .filter-button{padding-left:4px}}.filter-container .filter-button .filter-icon{padding-left:8px;padding-right:4px}.filter-container .filter-button.--list-icon{font-size:0;width:36px;height:36px;padding:0}.filter-container .filter-button.--list-icon .filter-icon{padding:0}.filter-container .filter-button.--list-icon:hover{background:#e3e3e3}.filter-container .filter-button.--table-icon{font-size:0;width:36px;height:36px;padding:0;border:none}.filter-container .filter-button.--table-icon .filter-icon{padding:0;width:24px;height:24px}.filter-container .filter-button.--table-icon:hover{background:#e3e3e3;border-radius:50%;width:36px;height:36px}.filter-container .filter-button:hover{background:#e3e3e3}.filter-container .filter-popover-container{display:flex;flex-direction:column;gap:8px;border-radius:4px;box-shadow:0px 1px 5px #1111114D;position:absolute;top:36px;left:0px;background-color:white;padding:8px 16px}.filter-container .filter-popover-container .filter-header{color:#757575;text-transform:uppercase;font-size:14px;font-weight:500;font-family:"Roboto", serif;padding-top:4px;padding-bottom:5px}.filter-container .filter-popover-container .filter-options-container{display:flex;flex-direction:column;gap:4px;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;padding-bottom:8px}.filter-container .filter-popover-container .filter-option{display:flex;flex-direction:row;align-items:center;min-height:36px;padding-left:8px}.filter-container .filter-popover-container .filter-option .select-all-icon{padding-right:6px}.filter-container .filter-popover-container .filter-option .checkbox-icon{padding-right:8px}.filter-container .filter-popover-container .filter-option .filter-label{padding-left:8px;padding-bottom:3px;font-size:16px;font-weight:500;font-family:"Roboto", serif}.filter-container .filter-popover-container .filter-option:first-child{padding-top:8px}.filter-container .filter-popover-container .filter-popover-button-container{display:flex;justify-content:flex-end;align-items:center}.filter-container .filter-popover-container .filter-popover-button-container .close-button{height:36px;width:74px;background-color:white;border:1px solid #d5d5d5;border-radius:4px;text-transform:uppercase;margin-right:8px;font-size:14px;font-weight:400;font-family:"Roboto", serif;color:#212121}.filter-container .filter-popover-container .filter-popover-button-container .apply-button{height:36px;width:73px;background-color:#1479c6;color:white;border-radius:4px;border:none;text-transform:uppercase;font-size:14px;font-weight:400;font-family:"Roboto", serif}.filter-container .filter-popover-container.--with-search-field .filter-header{border-bottom:1px solid #d5d5d5}.filter-container .filter-popover-container.--with-search-field .search-field-container{position:relative;color:#d5d5d5;height:36px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon{position:absolute;top:6px;left:8px}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input{padding-left:36px;border:1px solid #d5d5d5;border-radius:4px;height:36px;width:100%;font-size:16px;font-family:"Roboto", serif;font-weight:500;box-sizing:border-box}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible,.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus{outline:none;border:1px solid #1479c6}.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder{color:#9e9e9e;font-size:16px;font-family:"Roboto", serif;font-weight:500}';export{r as tttx_filter}