@gravionlabs/helix-ui 22.2.4 → 22.2.6

package/package.json

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

package/styles.css

@@ -2268,6 +2268,246 @@
     outline: var(--h-datepicker-date-focus-ring-width) var(--h-datepicker-date-focus-ring-style) var(--h-datepicker-date-focus-ring-color);
   }
 
+  /* date-time-picker */
+  /*
+   * DateTimePicker: `<hx-date-time-picker>`. The field, button and popup of the date picker with the calendar and a
+   * time row inside; styled by `date-picker.scss` (`hx-date-picker-*`) and `time-row.scss`. Every colour and size comes from the
+   * `--h-datepicker-*` and `--h-inputtext-*` tokens.
+   */
+  .hx-date-time-picker {
+    display: inline-block;
+  }
+
+  .hx-date-time-picker:not(.hx-date-time-picker-inline) {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .hx-date-time-picker-field {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .hx-date-time-picker-panel {
+    box-sizing: border-box;
+    min-width: 17rem;
+    padding: var(--h-datepicker-panel-padding);
+    border: 1px solid var(--h-datepicker-panel-border-color);
+    border-radius: var(--h-datepicker-panel-border-radius);
+    background: var(--h-datepicker-panel-background);
+    color: var(--h-datepicker-panel-color);
+  }
+
+  .hx-date-time-picker-popup .hx-date-time-picker-panel {
+    border-radius: var(--h-datepicker-panel-border-radius) var(--h-datepicker-panel-border-radius) 0 0;
+  }
+
+  .hx-date-time-picker-popup .hx-date-time-picker-panel:last-child {
+    border-radius: var(--h-datepicker-panel-border-radius);
+  }
+
+  .hx-date-time-picker-input {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--h-inputtext-padding-y) var(--h-inputtext-padding-x);
+    border: 1px solid var(--h-inputtext-border-color);
+    border-radius: var(--h-inputtext-border-radius);
+    background: var(--h-inputtext-background);
+    color: var(--h-inputtext-color);
+    box-shadow: var(--h-inputtext-shadow);
+    font: inherit;
+    font-size: 1rem;
+    outline: 0 none;
+    transition: border-color var(--h-datepicker-transition-duration), box-shadow var(--h-datepicker-transition-duration);
+  }
+
+  .hx-date-time-picker-input::placeholder {
+    color: var(--h-inputtext-placeholder-color);
+  }
+
+  .hx-date-time-picker-input:enabled:hover {
+    border-color: var(--h-inputtext-hover-border-color);
+  }
+
+  .hx-date-time-picker-input:enabled:focus,
+  .hx-date-time-picker-open .hx-date-time-picker-input {
+    border-color: var(--h-inputtext-focus-border-color);
+    outline: var(--h-inputtext-focus-ring-width) var(--h-inputtext-focus-ring-style) var(--h-inputtext-focus-ring-color);
+    outline-offset: var(--h-inputtext-focus-ring-offset);
+    box-shadow: var(--h-inputtext-focus-ring-shadow);
+  }
+
+  .hx-date-time-picker-input:disabled {
+    background: var(--h-inputtext-disabled-background);
+    color: var(--h-inputtext-disabled-color);
+  }
+
+  .hx-date-time-picker-invalid .hx-date-time-picker-input,
+  .hx-date-time-picker.ng-invalid.ng-touched .hx-date-time-picker-input,
+  .hx-date-time-picker-input[aria-invalid=true] {
+    border-color: var(--h-inputtext-invalid-border-color);
+  }
+
+  .hx-date-time-picker-invalid .hx-date-time-picker-panel,
+  .hx-date-time-picker.ng-invalid.ng-touched .hx-date-time-picker-panel {
+    border-color: var(--h-form-field-invalid-border-color);
+  }
+
+  .hx-date-time-picker-has-icon .hx-date-time-picker-input {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .hx-date-time-picker-disabled {
+    opacity: 0.6;
+  }
+
+  .hx-date-time-picker-trigger {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--h-datepicker-dropdown-width);
+    border: 1px solid var(--h-datepicker-dropdown-border-color);
+    border-inline-start: 0;
+    border-start-end-radius: var(--h-datepicker-dropdown-border-radius);
+    border-end-end-radius: var(--h-datepicker-dropdown-border-radius);
+    background: var(--h-datepicker-dropdown-background);
+    color: var(--h-datepicker-dropdown-color);
+    cursor: pointer;
+    outline: 0 none;
+  }
+
+  .hx-date-time-picker-trigger:not(:disabled):hover {
+    border-color: var(--h-datepicker-dropdown-hover-border-color);
+    background: var(--h-datepicker-dropdown-hover-background);
+    color: var(--h-datepicker-dropdown-hover-color);
+  }
+
+  .hx-date-time-picker-trigger:focus-visible {
+    outline: var(--h-datepicker-dropdown-focus-ring-width) var(--h-datepicker-dropdown-focus-ring-style) var(--h-datepicker-dropdown-focus-ring-color);
+    outline-offset: var(--h-datepicker-dropdown-focus-ring-offset);
+    box-shadow: var(--h-datepicker-dropdown-focus-ring-shadow);
+  }
+
+  .hx-date-time-picker-trigger-icon {
+    display: inline-block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    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='M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1ZM4 10.5h16M8.5 3.5v4M15.5 3.5v4'/%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='M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1ZM4 10.5h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-date-time-picker-popup {
+    box-shadow: var(--h-datepicker-panel-shadow);
+    border-radius: var(--h-datepicker-panel-border-radius);
+    background: var(--h-datepicker-panel-background);
+    color: var(--h-datepicker-panel-color);
+    font-size: 1rem;
+  }
+
+  .hx-date-time-picker-buttonbar {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--h-datepicker-buttonbar-padding);
+    border: 1px solid var(--h-datepicker-buttonbar-border-color);
+    border-top: 0;
+    border-radius: 0 0 var(--h-datepicker-panel-border-radius) var(--h-datepicker-panel-border-radius);
+  }
+
+  .hx-date-time-picker-button {
+    padding: var(--h-datepicker-select-month-padding);
+    border: 0;
+    border-radius: var(--h-datepicker-select-month-border-radius);
+    background: transparent;
+    color: var(--h-datepicker-select-month-color);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .hx-date-time-picker-button:hover {
+    background: var(--h-datepicker-select-month-hover-background);
+  }
+
+  /* date-time-range-picker */
+  /*
+   * DateTimeRangePicker: `<hx-date-time-range-picker>`. One read-only field with a button (styled by `date-picker.scss`)
+   * and a popup with one calendar for the range and an inline `hx-time-picker` for each end; every colour and size comes from the
+   * date picker and input tokens.
+   */
+  .hx-date-time-range-picker {
+    display: block;
+    position: relative;
+  }
+
+  .hx-date-time-range-picker .hx-date-time-range-picker-control {
+    display: flex;
+    width: 100%;
+  }
+
+  .hx-date-time-range-picker-popup {
+    max-width: calc(100vw - 2rem);
+    overflow: auto;
+  }
+
+  .hx-date-time-range-picker-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--h-datepicker-title-gap);
+    padding: var(--h-datepicker-panel-padding);
+  }
+
+  .hx-date-time-range-picker-times {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  /* from and to side by side: the name above the time, the arrows beside the value */
+  .hx-date-time-range-picker-time {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-time-range-picker-caption {
+    font-weight: var(--h-datepicker-title-font-weight);
+  }
+
+  .hx-date-time-range-picker-popup .hx-date-picker-time {
+    padding: 0;
+  }
+
+  .hx-date-time-range-picker-popup .hx-date-picker-time-column {
+    flex-direction: row-reverse;
+  }
+
+  .hx-date-time-range-picker-popup .hx-date-picker-time-up-icon {
+    transform: rotate(90deg);
+  }
+
+  .hx-date-time-range-picker-popup .hx-date-picker-time-down-icon {
+    transform: rotate(90deg);
+  }
+
+  .hx-date-time-range-picker-spacer {
+    flex: 1 1 auto;
+  }
+
+  .hx-date-time-range-picker-footer {
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-time-range-picker-submit {
+    font-weight: var(--h-datepicker-title-font-weight);
+  }
+
   /* dialog */
   /*
    * Dialog: `<hx-dialog>` and the dialogs of `HxDialogService`. The box (`.hx-dialog`) is a grid of the title, the
@@ -6904,6 +7144,253 @@
     font-size: var(--h-tag-icon-size);
   }
 
+  /* time-picker */
+  /*
+   * TimePicker: `<hx-time-picker>`. The field, button and popup of the date picker with a time row inside; the
+   * columns are styled by `time-row.scss` (`hx-date-picker-time-*`). Every colour and size comes from the
+   * `--h-datepicker-*` and `--h-inputtext-*` tokens.
+   */
+  .hx-time-picker {
+    display: inline-block;
+  }
+
+  .hx-time-picker:not(.hx-time-picker-inline) {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .hx-time-picker-field {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .hx-time-picker-panel {
+    box-sizing: border-box;
+    padding: var(--h-datepicker-panel-padding);
+    border: 1px solid var(--h-datepicker-panel-border-color);
+    border-radius: var(--h-datepicker-panel-border-radius);
+    background: var(--h-datepicker-panel-background);
+    color: var(--h-datepicker-panel-color);
+  }
+
+  .hx-time-picker-popup .hx-time-picker-panel {
+    border-radius: var(--h-datepicker-panel-border-radius) var(--h-datepicker-panel-border-radius) 0 0;
+  }
+
+  .hx-time-picker-popup .hx-time-picker-panel:last-child {
+    border-radius: var(--h-datepicker-panel-border-radius);
+  }
+
+  .hx-time-picker-input {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--h-inputtext-padding-y) var(--h-inputtext-padding-x);
+    border: 1px solid var(--h-inputtext-border-color);
+    border-radius: var(--h-inputtext-border-radius);
+    background: var(--h-inputtext-background);
+    color: var(--h-inputtext-color);
+    box-shadow: var(--h-inputtext-shadow);
+    font: inherit;
+    font-size: 1rem;
+    outline: 0 none;
+    transition: border-color var(--h-datepicker-transition-duration), box-shadow var(--h-datepicker-transition-duration);
+  }
+
+  .hx-time-picker-input::placeholder {
+    color: var(--h-inputtext-placeholder-color);
+  }
+
+  .hx-time-picker-input:enabled:hover {
+    border-color: var(--h-inputtext-hover-border-color);
+  }
+
+  .hx-time-picker-input:enabled:focus,
+  .hx-time-picker-open .hx-time-picker-input {
+    border-color: var(--h-inputtext-focus-border-color);
+    outline: var(--h-inputtext-focus-ring-width) var(--h-inputtext-focus-ring-style) var(--h-inputtext-focus-ring-color);
+    outline-offset: var(--h-inputtext-focus-ring-offset);
+    box-shadow: var(--h-inputtext-focus-ring-shadow);
+  }
+
+  .hx-time-picker-input:disabled {
+    background: var(--h-inputtext-disabled-background);
+    color: var(--h-inputtext-disabled-color);
+  }
+
+  .hx-time-picker-invalid .hx-time-picker-input,
+  .hx-time-picker.ng-invalid.ng-touched .hx-time-picker-input,
+  .hx-time-picker-input[aria-invalid=true] {
+    border-color: var(--h-inputtext-invalid-border-color);
+  }
+
+  .hx-time-picker-invalid .hx-time-picker-panel,
+  .hx-time-picker.ng-invalid.ng-touched .hx-time-picker-panel {
+    border-color: var(--h-form-field-invalid-border-color);
+  }
+
+  .hx-time-picker-has-icon .hx-time-picker-input {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .hx-time-picker-disabled {
+    opacity: 0.6;
+  }
+
+  .hx-time-picker-disabled .hx-date-picker-time-button {
+    cursor: default;
+  }
+
+  .hx-time-picker-trigger {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--h-datepicker-dropdown-width);
+    border: 1px solid var(--h-datepicker-dropdown-border-color);
+    border-inline-start: 0;
+    border-start-end-radius: var(--h-datepicker-dropdown-border-radius);
+    border-end-end-radius: var(--h-datepicker-dropdown-border-radius);
+    background: var(--h-datepicker-dropdown-background);
+    color: var(--h-datepicker-dropdown-color);
+    cursor: pointer;
+    outline: 0 none;
+  }
+
+  .hx-time-picker-trigger:not(:disabled):hover {
+    border-color: var(--h-datepicker-dropdown-hover-border-color);
+    background: var(--h-datepicker-dropdown-hover-background);
+    color: var(--h-datepicker-dropdown-hover-color);
+  }
+
+  .hx-time-picker-trigger:focus-visible {
+    outline: var(--h-datepicker-dropdown-focus-ring-width) var(--h-datepicker-dropdown-focus-ring-style) var(--h-datepicker-dropdown-focus-ring-color);
+    outline-offset: var(--h-datepicker-dropdown-focus-ring-offset);
+    box-shadow: var(--h-datepicker-dropdown-focus-ring-shadow);
+  }
+
+  .hx-time-picker-trigger-icon {
+    display: inline-block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    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='M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7.5V12l3 2'/%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='M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7.5V12l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-time-picker-popup {
+    box-shadow: var(--h-datepicker-panel-shadow);
+    border-radius: var(--h-datepicker-panel-border-radius);
+    background: var(--h-datepicker-panel-background);
+    color: var(--h-datepicker-panel-color);
+    font-size: 1rem;
+  }
+
+  .hx-time-picker-buttonbar {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--h-datepicker-buttonbar-padding);
+    border: 1px solid var(--h-datepicker-buttonbar-border-color);
+    border-top: 0;
+    border-radius: 0 0 var(--h-datepicker-panel-border-radius) var(--h-datepicker-panel-border-radius);
+  }
+
+  .hx-time-picker-button {
+    padding: var(--h-datepicker-select-month-padding);
+    border: 0;
+    border-radius: var(--h-datepicker-select-month-border-radius);
+    background: transparent;
+    color: var(--h-datepicker-select-month-color);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .hx-time-picker-button:hover {
+    background: var(--h-datepicker-select-month-hover-background);
+  }
+
+  /* time-row */
+  /*
+   * Time row: the columns of `<hx-time-row>` (hour, minute, second, AM/PM) inside the time picker, the date-time
+   * picker and the date-time range picker. Every colour and size comes from the `--h-datepicker-*` tokens.
+   */
+  .hx-date-picker-time {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--h-datepicker-title-gap);
+    padding: var(--h-datepicker-header-padding);
+  }
+
+  .hx-date-picker-time-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .hx-date-picker-time-button,
+  .hx-date-picker-time-spin {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--h-datepicker-date-width);
+    height: var(--h-datepicker-date-height);
+    border: 0;
+    border-radius: var(--h-datepicker-date-border-radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: 0 none;
+  }
+
+  .hx-date-picker-time-button {
+    cursor: pointer;
+  }
+
+  .hx-date-picker-time-spin {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .hx-date-picker-time-button:not(:disabled):hover {
+    background: var(--h-datepicker-date-hover-background);
+    color: var(--h-datepicker-date-hover-color);
+  }
+
+  .hx-date-picker-time-button:focus-visible,
+  .hx-date-picker-time-spin: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);
+    box-shadow: var(--h-datepicker-date-focus-ring-shadow);
+  }
+
+  .hx-date-picker-time-up-icon {
+    display: inline-block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-date-picker-time-down-icon {
+    display: inline-block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-date-picker-disabled .hx-date-picker-time-button,
+  .hx-date-time-picker-disabled .hx-date-picker-time-button {
+    cursor: default;
+  }
+
   /* timeline */
   /*
    * Timeline: `<hx-timeline>`. Events in an ordered list, each a row (vertical) or column (horizontal) of the opposite