@gravionlabs/helix-ui 22.2.7 → 22.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravionlabs/helix-ui",
-  "version": "22.2.7",
+  "version": "22.2.9",
   "description": "Helix UI: vanilla Angular components on the Helix design tokens — plain CSS, no runtime styling engine.",
   "license": "MIT",
   "keywords": [

package/styles.css

@@ -1773,6 +1773,63 @@
     justify-content: flex-end;
   }
 
+  /* the filter button of filterDisplay="menu": an icon button beside the label, marked when the column is filtered */
+  .hx-data-table-filter-button {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin: 0;
+    position: relative;
+    padding: 0.125rem;
+    border: 0;
+    background: transparent;
+    color: var(--h-datatable-sort-icon-color);
+    cursor: pointer;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+
+  .hx-data-table-filter-icon {
+    display: inline-block;
+    flex: none;
+    width: var(--h-datatable-sort-icon-size);
+    height: var(--h-datatable-sort-icon-size);
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V19l-4 1.5v-8L4 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V19l-4 1.5v-8L4 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-data-table-filter-button:hover {
+    color: var(--h-datatable-sort-icon-hover-color);
+  }
+
+  .hx-data-table-filter-button:focus-visible {
+    outline: var(--h-datatable-header-cell-focus-ring-width) var(--h-datatable-header-cell-focus-ring-style) var(--h-datatable-header-cell-focus-ring-color);
+    outline-offset: var(--h-datatable-header-cell-focus-ring-offset);
+    box-shadow: var(--h-datatable-header-cell-focus-ring-shadow);
+  }
+
+  .hx-data-table-filter-button.hx-data-table-filter-active {
+    color: var(--h-datatable-header-cell-selected-color);
+  }
+
+  .hx-data-table-filter-button.hx-data-table-filter-active::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 50%;
+    background: currentcolor;
+  }
+
+  .hx-data-table-filter-menu {
+    display: flex;
+    align-items: center;
+    gap: var(--h-datatable-header-cell-gap);
+  }
+
   /* sortable headers: a button that fills the header cell */
   .hx-data-table-sort {
     display: inline-flex;
@@ -2138,7 +2195,8 @@
   .hx-date-picker-disabled .hx-date-picker-month,
   .hx-date-picker-disabled .hx-date-picker-year,
   .hx-date-picker-disabled .hx-date-picker-nav,
-  .hx-date-picker-disabled .hx-date-picker-title-button {
+  .hx-date-picker-disabled .hx-date-picker-title-button,
+  .hx-date-picker-disabled .hx-range-preset {
     cursor: default;
   }
 
@@ -2280,7 +2338,7 @@
     cursor: pointer;
   }
 
-  .hx-date-picker-button:hover {
+  .hx-date-picker-button:not(:disabled):hover {
     background: var(--h-datepicker-select-month-hover-background);
   }
 
@@ -2288,6 +2346,223 @@
     outline: var(--h-datepicker-date-focus-ring-width) var(--h-datepicker-date-focus-ring-style) var(--h-datepicker-date-focus-ring-color);
   }
 
+  /* range presets (`presets` of a range date picker and of the date-time range picker): a row of buttons or one select */
+  .hx-range-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-range-presets-select {
+    display: block;
+  }
+
+  .hx-range-preset:disabled {
+    cursor: default;
+  }
+
+  /* above the calendar, inside the panel's padding */
+  .hx-date-picker-panel > .hx-range-presets {
+    padding-bottom: var(--h-datepicker-title-gap);
+  }
+
+  /* the message of a refused preset, under the presets */
+  .hx-date-picker-panel > .hx-date-picker-error {
+    margin: 0 0 var(--h-datepicker-title-gap);
+    color: var(--h-inputtext-invalid-border-color);
+  }
+
+  /* date-range-quick-select */
+  /*
+   * DateRangeQuickSelect: `<hx-date-range-quick-select>`. One read-only field with a button (styled by `date-picker.scss`)
+   * and a compact Kibana-style popup: Quick select (Last/Next N unit, Apply), Commonly used, Recently used and one
+   * summary button each for the start and the end, which opens the editor of that side (tabs Absolute / Relative / Now,
+   * the calendar in the Absolute tab); every colour and size comes from the date picker and input tokens.
+   */
+  .hx-date-range-quick-select {
+    display: block;
+    position: relative;
+  }
+
+  .hx-date-range-quick-select .hx-date-range-quick-select-control {
+    display: flex;
+    width: 100%;
+  }
+
+  /* kept compact, about 360px wide; the popup carries the outer border */
+  .hx-date-range-quick-select-popup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--h-datepicker-title-gap);
+    width: 24rem;
+    max-width: calc(100vw - 2rem);
+    overflow: auto;
+    padding: var(--h-datepicker-panel-padding);
+    border: 1px solid var(--h-datepicker-panel-border-color);
+  }
+
+  .hx-date-range-quick-select-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-range-quick-select-caption {
+    font-weight: var(--h-datepicker-title-font-weight);
+  }
+
+  .hx-date-range-quick-select-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-range-quick-select-amount {
+    width: 4.5rem;
+  }
+
+  /* the selects keep a readable width */
+  .hx-date-range-quick-select-direction {
+    min-width: 5.5rem;
+  }
+
+  .hx-date-range-quick-select-unit {
+    min-width: 6.5rem;
+  }
+
+  .hx-date-range-quick-select-apply {
+    font-weight: var(--h-datepicker-title-font-weight);
+  }
+
+  /* the other list classes (`-common`, `-recent`) are hooks styled through their parts */
+  .hx-date-range-quick-select-ranges {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .hx-date-range-quick-select-ranges .hx-date-picker-button {
+    width: 100%;
+    text-align: start;
+  }
+
+  /* one line per side: the name above its value */
+  .hx-date-range-quick-select-summary {
+    display: flex;
+    align-items: stretch;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-range-quick-select-side-line {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    padding: var(--h-datepicker-select-month-padding);
+    border: 1px solid var(--h-datepicker-panel-border-color);
+    border-radius: var(--h-datepicker-select-month-border-radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .hx-date-range-quick-select-side-line:hover {
+    background: var(--h-datepicker-select-month-hover-background);
+  }
+
+  /* the side whose editor is open */
+  .hx-date-range-quick-select-side-line[aria-expanded=true] {
+    border-color: var(--h-datepicker-date-selected-background);
+  }
+
+  .hx-date-range-quick-select-side-line:focus-visible,
+  .hx-date-range-quick-select-tab:focus-visible,
+  .hx-date-range-quick-select-tabpanel:focus-visible {
+    outline: var(--h-datepicker-date-focus-ring-width) var(--h-datepicker-date-focus-ring-style) var(--h-datepicker-date-focus-ring-color);
+    outline-offset: var(--h-datepicker-date-focus-ring-offset);
+  }
+
+  .hx-date-range-quick-select-side-name {
+    color: var(--h-datepicker-week-day-color);
+    font-weight: var(--h-datepicker-week-day-font-weight);
+  }
+
+  .hx-date-range-quick-select-side-value {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* the editor of one side: tabs Absolute / Relative / Now; the other classes (`-editor-from`, `-editor-to`,
+     `-side-date`, `-expression`, `-resolved-date`) are hooks styled through their parts */
+  .hx-date-range-quick-select-editor,
+  .hx-date-range-quick-select-tabpanel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-range-quick-select-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--h-datepicker-panel-border-color);
+  }
+
+  .hx-date-range-quick-select-tab {
+    padding: var(--h-datepicker-select-month-padding);
+    border: 0;
+    border-bottom: 2px solid transparent;
+    background: transparent;
+    color: var(--h-datepicker-select-month-color);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .hx-date-range-quick-select-tab:hover {
+    background: var(--h-datepicker-select-month-hover-background);
+  }
+
+  .hx-date-range-quick-select-tab[aria-selected=true] {
+    border-bottom-color: var(--h-datepicker-date-selected-background);
+    font-weight: var(--h-datepicker-title-font-weight);
+  }
+
+  .hx-date-range-quick-select-side-amount {
+    width: 4.5rem;
+  }
+
+  .hx-date-range-quick-select-side-unit {
+    flex: 1 1 10rem;
+  }
+
+  .hx-date-range-quick-select-side-round {
+    display: flex;
+    align-items: center;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-range-quick-select-now-hint,
+  .hx-date-range-quick-select-side-resolved {
+    margin: 0;
+  }
+
+  /* the date math of a relative side and the date it resolves to */
+  .hx-date-range-quick-select-side-resolved {
+    color: var(--h-datepicker-week-day-color);
+  }
+
+  /* a range could not be applied */
+  .hx-date-range-quick-select-error {
+    margin: 0;
+    color: var(--h-inputtext-invalid-border-color);
+  }
+
   /* date-time-picker */
   /*
    * DateTimePicker: `<hx-date-time-picker>`. The field, button and popup of the date picker with the calendar and a
@@ -2535,10 +2810,8 @@
     font-weight: var(--h-datepicker-title-font-weight);
   }
 
-  .hx-date-time-range-picker-presets {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--h-datepicker-title-gap);
+  /* the preset row (`.hx-range-presets`, styled by `date-picker.scss`) at the top of the popup */
+  .hx-date-time-range-picker-popup > .hx-range-presets {
     padding: var(--h-datepicker-panel-padding) var(--h-datepicker-panel-padding) 0;
   }