@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-date-picker/pf-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-date-picker.js","sourceRoot":"","sources":["../../../src/components/pf-date-picker/pf-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  composeDescribedBy,\n  Keys,\n  observeAnchoredPosition,\n  parseISODate,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated date field: a trigger that opens `pf-calendar` in a\n * popover.\n *\n * Form-associated, which the React `DatePicker` is not — it is a button and a\n * portal, so its value reaches a surrounding `<form>` only if the consumer\n * wires it there themselves. Here the value is submitted as `YYYY-MM-DD`,\n * constraint validation works, and Angular's generated accessor has something\n * to bind to.\n *\n * The panel is a `popover`, so light dismiss and Escape are the browser's.\n * Unlike `pf-dropdown`, the trigger and the panel are both in *this* shadow\n * root, so `aria-controls` resolves and is worth setting — a same-root IDREF\n * is the one case that works, measured.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the calendar.\n * @part clear - the clear button.\n * @part panel - the floating panel holding the calendar.\n * @part calendar - the calendar itself.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-date-picker',\n  styleUrl: 'pf-date-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfDatePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name. Reflected, because the submission name comes\n   * from the content attribute and the generated bindings set properties.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The selected date as `YYYY-MM-DD`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the calendar is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Visible label. In the same root as the trigger, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select a date';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Offer a button that empties the field. */\n  @Prop() allowClear = false;\n\n  /** Earliest selectable date, as `YYYY-MM-DD`. */\n  @Prop() min?: string;\n\n  /** Latest selectable date, as `YYYY-MM-DD`. */\n  @Prop() max?: string;\n\n  @Prop() startYear?: number;\n\n  @Prop() endYear?: number;\n\n  @Prop() showOutsideDays = true;\n\n  /** A predicate for days that cannot be chosen; see `pf-calendar`. */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires when a date is chosen or cleared. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the calendar opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** What a form reset restores; `value` has been overwritten by then. */\n  private initialValue = '';\n\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** The one place an open or close is announced, whatever caused it. */\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  /** Opens the calendar. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the calendar. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the field started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private get calendar() {\n    return (\n      this.el.shadowRoot?.querySelector<HTMLElement & { focusSelectedDay(): Promise<void> }>(\n        'pf-calendar',\n      ) ?? null\n    );\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    // Focus the grid, not the panel: the calendar owns its own tab stop, and\n    // it asks for focus through a method rather than having it reached for.\n    void this.calendar?.focusSelectedDay();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /**\n   * Mirrors a browser-driven close — a light dismiss or Escape — back into\n   * `open`, which is what then announces it.\n   */\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  /**\n   * Listens on the calendar element itself, not on the host.\n   *\n   * Both were tried. A `@Listen('pfChange')` on the host sees the calendar's\n   * event *and* this element's own — a Stencil event is composed, so by then\n   * both have been retargeted to the host and `event.target` cannot tell them\n   * apart. Worse, `stopPropagation()` there does not help: the consumer's\n   * listener is on that same node, and stopping propagation never stops\n   * same-node listeners, so every pick reported twice. Caught by a test that\n   * counted them.\n   *\n   * On the calendar, the event is stopped before it reaches the host at all,\n   * which does not depend on listener registration order the way\n   * `stopImmediatePropagation` would.\n   */\n  private bindCalendar = (element?: HTMLElement) => {\n    if (!element || element === this.boundCalendar) return;\n    this.boundCalendar = element;\n    element.addEventListener('pfChange', this.onCalendarChange as EventListener);\n  };\n\n  private boundCalendar?: HTMLElement;\n\n  private onCalendarChange = (event: CustomEvent<{ value: string }>) => {\n    event.stopPropagation();\n\n    this.value = event.detail.value;\n    this.pfChange.emit({ value: this.value });\n    this.open = false;\n    this.trigger?.focus();\n  };\n\n  private clear = (event: MouseEvent) => {\n    event.stopPropagation();\n    if (!this.value) return;\n    this.value = '';\n    this.pfChange.emit({ value: '' });\n  };\n\n  /**\n   * Down opens the calendar from a closed trigger, as a popup button should.\n   * Escape is the browser's while the panel is open — `popover=\"auto\"` handles\n   * it — so there is nothing to do here for it.\n   */\n  private onTriggerKeyDown = (event: KeyboardEvent) => {\n    if (this.open || this.disabled) return;\n    if (event.key === Keys.ArrowDown || event.key === Keys.Enter || event.key === Keys.Space) {\n      if (event.key === Keys.ArrowDown) {\n        event.preventDefault();\n        this.open = true;\n      }\n    }\n  };\n\n  /** `MMM D, YYYY`, matching the React component's trigger text. */\n  private formatted(): string {\n    const date = parseISODate(this.value);\n    if (!date) return '';\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric',\n    }).format(date);\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const text = this.formatted();\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div class=\"row\">\n            <button\n              id=\"trigger\"\n              aria-label={controlAriaLabel(this.el, this.label)}\n              part=\"trigger\"\n              class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n              type=\"button\"\n              disabled={this.disabled}\n              aria-haspopup=\"dialog\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              /* Same shadow root as the panel, so this IDREF resolves. */\n              aria-controls=\"panel\"\n              aria-invalid={this.error ? 'true' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-describedby={describedBy}\n              onClick={() => {\n                if (!this.disabled) this.open = !this.open;\n              }}\n              onKeyDown={this.onTriggerKeyDown}\n            >\n              <span class={{ value: true, 'value--placeholder': !text }}>\n                {text || this.placeholder}\n              </span>\n              <pf-icon name=\"calendar\"></pf-icon>\n            </button>\n\n            {this.allowClear && this.value && (\n              <button\n                class=\"clear\"\n                part=\"clear\"\n                type=\"button\"\n                aria-label=\"Clear selected date\"\n                disabled={this.disabled}\n                onClick={this.clear}\n              >\n                <pf-icon name=\"circle-xmark\"></pf-icon>\n              </button>\n            )}\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a date\"\n          onToggle={this.onToggle}\n        >\n          <pf-calendar\n            ref={this.bindCalendar}\n            part=\"calendar\"\n            value={this.value || undefined}\n            min={this.min}\n            max={this.max}\n            startYear={this.startYear}\n            endYear={this.endYear}\n            showOutsideDays={this.showOutsideDays}\n            isDateDisabled={this.isDateDisabled}\n          ></pf-calendar>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-date-range-picker/pf-date-range-picker.css

@@ -0,0 +1,267 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.field {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.label {
+  color: var(--pf-daterange-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.required {
+  color: var(--pf-daterange-invalid-border);
+  margin-inline-start: var(--space-1);
+}
+
+.row-controls {
+  align-items: center;
+  display: flex;
+  gap: var(--space-2);
+}
+
+.trigger {
+  align-items: center;
+  background: var(--pf-daterange-bg);
+  border: 1px solid var(--pf-daterange-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-daterange-text);
+  cursor: pointer;
+  display: flex;
+  flex: 1;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  gap: var(--space-2);
+  justify-content: space-between;
+  min-width: 0;
+  padding: var(--space-2) var(--space-3);
+  text-align: start;
+}
+
+.trigger:focus-visible {
+  box-shadow: var(--pf-daterange-focus-ring);
+  outline: none;
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.trigger--invalid {
+  border-color: var(--pf-daterange-invalid-border);
+}
+
+.value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.value--placeholder {
+  color: var(--pf-daterange-text-muted);
+}
+
+.clear {
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-daterange-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: var(--space-1);
+}
+
+.clear:hover:not(:disabled) {
+  color: var(--pf-daterange-text);
+}
+
+.clear:focus-visible {
+  box-shadow: var(--pf-daterange-focus-ring);
+  outline: none;
+}
+
+.description {
+  color: var(--pf-daterange-text-muted);
+  font-size: var(--font-size-xs);
+  margin: 0;
+}
+
+.error {
+  color: var(--pf-daterange-invalid-border);
+  font-size: var(--font-size-xs);
+  margin: 0;
+}
+
+/* See src/place-popover.ts: the UA stylesheet centres a popover otherwise. */
+.panel {
+  inset: auto;
+  margin: 0;
+  background: var(--pf-daterange-menu-bg);
+  border: 1px solid var(--pf-daterange-menu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  color: var(--pf-daterange-text);
+  padding: var(--space-3);
+}
+
+.panel:popover-open {
+  animation: pf-date-range-in var(--pf-transition-enter);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-date-range-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel:popover-open {
+    animation: none;
+  }
+}
+
+.nav {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--space-2);
+}
+
+.step {
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-daterange-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  padding: var(--space-1);
+}
+
+.step:hover {
+  background: var(--pf-daterange-bg-subtle);
+  color: var(--pf-daterange-text);
+}
+
+.step:focus-visible {
+  box-shadow: var(--pf-daterange-focus-ring);
+  outline: none;
+}
+
+/* One month on a phone, two side by side from --md up. */
+.months {
+  display: grid;
+  gap: var(--space-4);
+}
+
+@media (min-width: 768px) {
+  .months {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.month-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  margin: 0 0 var(--space-2);
+  text-align: center;
+}
+
+.grid {
+  display: grid;
+  gap: 2px;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+/*
+ * `display: contents`, so each row's seven cells join the grid's own columns.
+ * The rows exist for the `role="row"` the grid pattern needs, not for layout.
+ */
+.row {
+  display: contents;
+}
+
+.weekday {
+  color: var(--pf-daterange-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  padding: var(--space-1) 0;
+  text-align: center;
+}
+
+.day,
+.empty {
+  aspect-ratio: 1;
+  display: flex;
+  min-width: var(--space-7);
+}
+
+.day {
+  align-items: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--pf-daterange-text);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+}
+
+.day:hover:not([aria-disabled='true']) {
+  background: var(--pf-daterange-bg-subtle);
+}
+
+.day:focus-visible {
+  box-shadow: var(--pf-daterange-focus-ring);
+  outline: none;
+}
+
+.day--today {
+  border-color: var(--pf-calendar-today-border);
+}
+
+/*
+ * The inside of the range is square and the ends are rounded on their outer
+ * side only, so the run reads as one band rather than a row of pills.
+ */
+.day--inside {
+  background: var(--pf-daterange-range-bg);
+  border-radius: 0;
+  color: var(--pf-daterange-range-text);
+}
+
+.day--endpoint {
+  background: var(--pf-calendar-selected-bg);
+  border-color: var(--pf-calendar-selected-bg);
+  color: var(--pf-calendar-selected-text);
+}
+
+.day--start:not(.day--end) {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.day--end:not(.day--start) {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.day[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}