@krollins/blueprint 0.1.13 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -3
- package/README.npm.md +9 -3
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/badge/badge.d.ts.map +1 -1
- package/dist/components/badge.js.map +1 -1
- package/dist/components/breadcrumb.js.map +1 -1
- package/dist/components/card.js.map +1 -1
- package/dist/components/checkbox.js +0 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/code-block/code-block.d.ts +143 -0
- package/dist/components/code-block/code-block.d.ts.map +1 -0
- package/dist/components/code-block/code-block.style.d.ts +2 -0
- package/dist/components/code-block/code-block.style.d.ts.map +1 -0
- package/dist/components/code-block.js +587 -0
- package/dist/components/code-block.js.map +1 -0
- package/dist/components/color-picker/color-picker.d.ts.map +1 -1
- package/dist/components/color-picker.js.map +1 -1
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/divider.js.map +1 -1
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/dropdown.js.map +1 -1
- package/dist/components/file-upload.js.map +1 -1
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/menu.js.map +1 -1
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/notification.js.map +1 -1
- package/dist/components/pagination.js.map +1 -1
- package/dist/components/popover.js.map +1 -1
- package/dist/components/radio.js.map +1 -1
- package/dist/components/select.js.map +1 -1
- package/dist/components/skeleton.js.map +1 -1
- package/dist/components/stepper.js.map +1 -1
- package/dist/components/switch.js +0 -1
- package/dist/components/switch.js.map +1 -1
- package/dist/components/table.js.map +1 -1
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/tag/tag.d.ts.map +1 -1
- package/dist/components/tag.js.map +1 -1
- package/dist/components/textarea.js.map +1 -1
- package/dist/components/time-picker.js.map +1 -1
- package/dist/components/tree.js.map +1 -1
- package/dist/index.js +31 -28
- package/dist/index.js.map +1 -1
- package/dist/shared/boolean-converter-XDGfS9LC.js.map +1 -1
- package/dist/shared/debounce-BckY30Sf.js.map +1 -1
- package/dist/shared/memoize-DlOFy-92.js.map +1 -1
- package/dist/shared/slider-BNt5TITl.js.map +1 -1
- package/dist/utilities/memoize.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.js","sources":["../../source/components/date-picker/date-picker.style.ts","../../source/components/date-picker/date-picker.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const datePickerStyles = css`\r\n /* Base */\r\n .date-picker {\r\n position: relative;\r\n width: 100%;\r\n }\r\n\r\n .date-picker__input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .date-picker__input {\r\n flex: 1;\r\n padding: var(--bp-spacing-sm) var(--bp-spacing-md);\r\n padding-right: var(--bp-spacing-2xl);\r\n font-family: var(--bp-font-family);\r\n font-size: var(--bp-font-size-base);\r\n color: var(--bp-color-text);\r\n background-color: var(--bp-color-surface);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-md);\r\n cursor: pointer;\r\n transition:\r\n border-color var(--bp-transition-fast),\r\n box-shadow var(--bp-transition-fast);\r\n outline: none;\r\n }\r\n\r\n .date-picker__input:hover:not(:disabled) {\r\n border-color: var(--bp-color-primary);\r\n }\r\n\r\n .date-picker__input:focus {\r\n border-color: var(--bp-color-focus);\r\n box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);\r\n }\r\n\r\n .date-picker__input:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n\r\n .date-picker__input::placeholder {\r\n color: var(--bp-color-text-muted);\r\n }\r\n\r\n .date-picker__clear {\r\n position: absolute;\r\n right: var(--bp-spacing-2xl);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--bp-spacing-lg);\r\n height: var(--bp-spacing-lg);\r\n padding: 0;\r\n font-size: var(--bp-font-size-sm);\r\n color: var(--bp-color-text-muted);\r\n background: none;\r\n border: none;\r\n border-radius: var(--bp-border-radius-sm);\r\n cursor: pointer;\r\n transition:\r\n color var(--bp-transition-fast),\r\n background-color var(--bp-transition-fast);\r\n }\r\n\r\n .date-picker__clear:hover {\r\n color: var(--bp-color-primary);\r\n background-color: color-mix(\r\n in srgb,\r\n var(--bp-color-primary) 8%,\r\n transparent\r\n );\r\n }\r\n\r\n .date-picker__indicator {\r\n position: absolute;\r\n right: var(--bp-spacing-md);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--bp-spacing-lg);\r\n height: var(--bp-spacing-lg);\r\n color: var(--bp-color-text-muted);\r\n pointer-events: none;\r\n }\r\n\r\n /* Calendar */\r\n .date-picker__calendar {\r\n position: absolute;\r\n top: calc(100% + var(--bp-spacing-xs));\r\n left: 0;\r\n z-index: var(--bp-z-dropdown);\r\n min-width: var(--bp-spacing-2xl);\r\n padding: var(--bp-spacing-md);\r\n background-color: var(--bp-color-surface);\r\n border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);\r\n border-right: var(--bp-border-width) solid var(--bp-color-border);\r\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\r\n border-left: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-md);\r\n box-shadow: var(--bp-shadow-md);\r\n }\r\n\r\n /* Header */\r\n .date-picker__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: var(--bp-spacing-sm);\r\n }\r\n\r\n .date-picker__nav-button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--bp-spacing-xl);\r\n height: var(--bp-spacing-xl);\r\n padding: 0;\r\n font-size: var(--bp-font-size-xl);\r\n color: var(--bp-color-text);\r\n background: none;\r\n border: none;\r\n border-radius: var(--bp-border-radius-sm);\r\n cursor: pointer;\r\n transition: background-color var(--bp-transition-fast);\r\n }\r\n\r\n .date-picker__nav-button:hover {\r\n background-color: color-mix(\r\n in srgb,\r\n var(--bp-color-primary) 8%,\r\n transparent\r\n );\r\n }\r\n\r\n .date-picker__month-year {\r\n flex: 1;\r\n font-size: var(--bp-font-size-base);\r\n font-weight: var(--bp-font-weight-semibold);\r\n color: var(--bp-color-text);\r\n text-align: center;\r\n }\r\n\r\n /* Weekdays */\r\n .date-picker__weekdays {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: var(--bp-spacing-xs);\r\n margin-bottom: var(--bp-spacing-xs);\r\n }\r\n\r\n .date-picker__weekday {\r\n padding: var(--bp-spacing-xs);\r\n font-size: var(--bp-font-size-xs);\r\n font-weight: var(--bp-font-weight-semibold);\r\n color: var(--bp-color-text-muted);\r\n text-align: center;\r\n text-transform: uppercase;\r\n }\r\n\r\n /* Days */\r\n .date-picker__days {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: var(--bp-spacing-xs);\r\n }\r\n\r\n .date-picker__day {\r\n aspect-ratio: 1;\r\n padding: var(--bp-spacing-xs);\r\n font-size: var(--bp-font-size-sm);\r\n color: var(--bp-color-text);\r\n background: none;\r\n border: none;\r\n border-radius: var(--bp-border-radius-sm);\r\n cursor: pointer;\r\n transition:\r\n background-color var(--bp-transition-fast),\r\n color var(--bp-transition-fast);\r\n }\r\n\r\n .date-picker__day:hover:not(:disabled) {\r\n background-color: color-mix(\r\n in srgb,\r\n var(--bp-color-primary) 8%,\r\n transparent\r\n );\r\n }\r\n\r\n .date-picker__day--other-month {\r\n color: var(--bp-color-text-muted);\r\n opacity: 0.5;\r\n }\r\n\r\n .date-picker__day--today {\r\n font-weight: var(--bp-font-weight-bold);\r\n color: var(--bp-color-primary);\r\n background-color: color-mix(\r\n in srgb,\r\n var(--bp-color-primary) 4%,\r\n transparent\r\n );\r\n }\r\n\r\n .date-picker__day--selected {\r\n color: var(--bp-color-text-inverse);\r\n background-color: var(--bp-color-primary);\r\n }\r\n\r\n .date-picker__day--selected:hover:not(:disabled) {\r\n background-color: var(--bp-color-primary-hover);\r\n }\r\n\r\n .date-picker__day--focused {\r\n outline: var(--bp-focus-width) solid var(--bp-color-primary);\r\n outline-offset: calc(-1 * var(--bp-focus-width));\r\n }\r\n\r\n .date-picker__day--disabled {\r\n color: var(--bp-color-text-muted);\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n\r\n /* Sizes */\r\n .date-picker--sm .date-picker__input {\r\n padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\r\n padding-right: var(--bp-spacing-xl);\r\n font-size: var(--bp-font-size-sm);\r\n }\r\n\r\n .date-picker--sm .date-picker__indicator {\r\n right: var(--bp-spacing-xs);\r\n width: var(--bp-spacing-md);\r\n height: var(--bp-spacing-md);\r\n }\r\n\r\n .date-picker--sm .date-picker__clear {\r\n right: var(--bp-spacing-xl);\r\n width: var(--bp-spacing-md);\r\n height: var(--bp-spacing-md);\r\n }\r\n\r\n .date-picker--sm .date-picker__calendar {\r\n padding: var(--bp-spacing-sm);\r\n }\r\n\r\n .date-picker--sm .date-picker__nav-button {\r\n width: var(--bp-spacing-lg);\r\n height: var(--bp-spacing-lg);\r\n font-size: var(--bp-font-size-lg);\r\n }\r\n\r\n .date-picker--sm .date-picker__month-year {\r\n font-size: var(--bp-font-size-sm);\r\n }\r\n\r\n .date-picker--sm .date-picker__header {\r\n margin-bottom: var(--bp-spacing-xs);\r\n }\r\n\r\n .date-picker--sm .date-picker__weekdays {\r\n gap: var(--bp-spacing-2xs);\r\n margin-bottom: var(--bp-spacing-2xs);\r\n }\r\n\r\n .date-picker--sm .date-picker__weekday {\r\n padding: var(--bp-spacing-2xs);\r\n font-size: var(--bp-font-size-xs);\r\n }\r\n\r\n .date-picker--sm .date-picker__days {\r\n gap: var(--bp-spacing-2xs);\r\n }\r\n\r\n .date-picker--sm .date-picker__day {\r\n padding: var(--bp-spacing-2xs);\r\n font-size: var(--bp-font-size-xs);\r\n }\r\n\r\n .date-picker--lg .date-picker__input {\r\n padding: var(--bp-spacing-md) var(--bp-spacing-lg);\r\n padding-right: var(--bp-spacing-24);\r\n font-size: var(--bp-font-size-lg);\r\n }\r\n\r\n .date-picker--lg .date-picker__indicator {\r\n right: var(--bp-spacing-md);\r\n width: var(--bp-spacing-xl);\r\n height: var(--bp-spacing-xl);\r\n }\r\n\r\n .date-picker--lg .date-picker__clear {\r\n right: var(--bp-spacing-24);\r\n width: var(--bp-spacing-xl);\r\n height: var(--bp-spacing-xl);\r\n }\r\n\r\n .date-picker--lg .date-picker__calendar {\r\n padding: var(--bp-spacing-lg);\r\n }\r\n\r\n .date-picker--lg .date-picker__nav-button {\r\n width: var(--bp-spacing-2xl);\r\n height: var(--bp-spacing-2xl);\r\n font-size: var(--bp-font-size-2xl);\r\n }\r\n\r\n .date-picker--lg .date-picker__month-year {\r\n font-size: var(--bp-font-size-lg);\r\n }\r\n\r\n .date-picker--lg .date-picker__header {\r\n margin-bottom: var(--bp-spacing-md);\r\n }\r\n\r\n .date-picker--lg .date-picker__weekdays {\r\n gap: var(--bp-spacing-sm);\r\n margin-bottom: var(--bp-spacing-sm);\r\n }\r\n\r\n .date-picker--lg .date-picker__weekday {\r\n padding: var(--bp-spacing-sm);\r\n font-size: var(--bp-font-size-sm);\r\n }\r\n\r\n .date-picker--lg .date-picker__days {\r\n gap: var(--bp-spacing-sm);\r\n }\r\n\r\n .date-picker--lg .date-picker__day {\r\n padding: var(--bp-spacing-sm);\r\n font-size: var(--bp-font-size-base);\r\n }\r\n\r\n /* States */\r\n .date-picker--disabled {\r\n opacity: 0.6;\r\n pointer-events: none;\r\n }\r\n`;\r\n","import { LitElement, html } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { datePickerStyles } from './date-picker.style.js';\r\n\r\nexport type DatePickerSize = 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * A calendar-based date picker component.\r\n *\r\n * @element bp-date-picker\r\n *\r\n * @fires bp-change - Fired when the selected date changes\r\n *\r\n * @csspart control - The outer container\r\n * @csspart input - The text input field\r\n * @csspart indicator - The calendar icon\r\n * @csspart clear-button - The clear button\r\n * @csspart calendar - The calendar dropdown\r\n * @csspart header - The calendar header with navigation\r\n * @csspart nav-button - Month/year navigation buttons\r\n * @csspart month-year - Month and year display\r\n * @csspart weekday - Day of week header cell\r\n * @csspart day - Individual day cell\r\n */\r\n@customElement('bp-date-picker')\r\nexport class BpDatePicker extends LitElement {\r\n @property({ type: String, reflect: true }) declare value: string;\r\n @property({ type: String }) declare name: string;\r\n @property({ type: String }) declare label: string;\r\n @property({ type: String }) declare placeholder: string;\r\n @property({ type: Boolean, reflect: true }) declare disabled: boolean;\r\n @property({ type: Boolean, reflect: true }) declare required: boolean;\r\n @property({ type: String, reflect: true }) declare size: DatePickerSize;\r\n @property({ type: String }) declare min: string;\r\n @property({ type: String }) declare max: string;\r\n @property({ type: String, attribute: 'first-day-of-week' })\r\n declare firstDayOfWeek: '0' | '1';\r\n\r\n @state() private isOpen = false;\r\n @state() private displayMonth = new Date().getMonth();\r\n @state() private displayYear = new Date().getFullYear();\r\n @state() private focusedDate: Date | null = null;\r\n\r\n static styles = [datePickerStyles];\r\n\r\n constructor() {\r\n super();\r\n this.value = '';\r\n this.name = '';\r\n this.label = '';\r\n this.placeholder = 'Select date...';\r\n this.disabled = false;\r\n this.required = false;\r\n this.size = 'md';\r\n this.min = '';\r\n this.max = '';\r\n this.firstDayOfWeek = '0';\r\n }\r\n\r\n private handleInputClick() {\r\n if (!this.disabled) {\r\n this.isOpen = !this.isOpen;\r\n }\r\n }\r\n\r\n private handlePreviousMonth() {\r\n if (this.displayMonth === 0) {\r\n this.displayMonth = 11;\r\n this.displayYear--;\r\n } else {\r\n this.displayMonth--;\r\n }\r\n }\r\n\r\n private handleNextMonth() {\r\n if (this.displayMonth === 11) {\r\n this.displayMonth = 0;\r\n this.displayYear++;\r\n } else {\r\n this.displayMonth++;\r\n }\r\n }\r\n\r\n private handleDateSelect(date: Date) {\r\n const previousValue = this.value;\r\n this.value = this.formatDate(date);\r\n this.isOpen = false;\r\n this.focusedDate = null;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('bp-change', {\r\n detail: {\r\n value: this.value,\r\n previousValue,\r\n date,\r\n },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n }\r\n\r\n private handleClear(e: Event) {\r\n e.stopPropagation();\r\n const previousValue = this.value;\r\n this.value = '';\r\n this.focusedDate = null;\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('bp-change', {\r\n detail: {\r\n value: '',\r\n previousValue,\r\n date: null,\r\n },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n }\r\n\r\n private handleKeyDown(e: Event) {\r\n const event = e as globalThis.KeyboardEvent;\r\n if (!this.isOpen) {\r\n if (\r\n event.key === 'ArrowDown' ||\r\n event.key === 'Enter' ||\r\n event.key === ' '\r\n ) {\r\n event.preventDefault();\r\n this.isOpen = true;\r\n this.focusedDate = this.getSelectedDate() || this.getTodayDate();\r\n }\r\n return;\r\n }\r\n\r\n const currentFocus =\r\n this.focusedDate || this.getSelectedDate() || this.getTodayDate();\r\n\r\n switch (event.key) {\r\n case 'Escape':\r\n event.preventDefault();\r\n this.isOpen = false;\r\n this.focusedDate = null;\r\n break;\r\n\r\n case 'ArrowLeft':\r\n event.preventDefault();\r\n this.focusedDate = this.addDays(currentFocus, -1);\r\n this.updateDisplayMonth(this.focusedDate);\r\n break;\r\n\r\n case 'ArrowRight':\r\n event.preventDefault();\r\n this.focusedDate = this.addDays(currentFocus, 1);\r\n this.updateDisplayMonth(this.focusedDate);\r\n break;\r\n\r\n case 'ArrowUp':\r\n event.preventDefault();\r\n this.focusedDate = this.addDays(currentFocus, -7);\r\n this.updateDisplayMonth(this.focusedDate);\r\n break;\r\n\r\n case 'ArrowDown':\r\n event.preventDefault();\r\n this.focusedDate = this.addDays(currentFocus, 7);\r\n this.updateDisplayMonth(this.focusedDate);\r\n break;\r\n\r\n case 'Home':\r\n event.preventDefault();\r\n this.focusedDate = new Date(\r\n currentFocus.getFullYear(),\r\n currentFocus.getMonth(),\r\n 1\r\n );\r\n break;\r\n\r\n case 'End':\r\n event.preventDefault();\r\n this.focusedDate = new Date(\r\n currentFocus.getFullYear(),\r\n currentFocus.getMonth() + 1,\r\n 0\r\n );\r\n break;\r\n\r\n case 'PageUp':\r\n event.preventDefault();\r\n this.focusedDate = this.addMonths(\r\n currentFocus,\r\n event.shiftKey ? -12 : -1\r\n );\r\n this.updateDisplayMonth(this.focusedDate);\r\n break;\r\n\r\n case 'PageDown':\r\n event.preventDefault();\r\n this.focusedDate = this.addMonths(\r\n currentFocus,\r\n event.shiftKey ? 12 : 1\r\n );\r\n this.updateDisplayMonth(this.focusedDate);\r\n break;\r\n\r\n case 'Enter':\r\n case ' ':\r\n event.preventDefault();\r\n if (this.focusedDate && !this.isDateDisabled(this.focusedDate)) {\r\n this.handleDateSelect(this.focusedDate);\r\n }\r\n break;\r\n }\r\n }\r\n\r\n private updateDisplayMonth(date: Date) {\r\n this.displayMonth = date.getMonth();\r\n this.displayYear = date.getFullYear();\r\n }\r\n\r\n private addDays(date: Date, days: number): Date {\r\n const result = new Date(date);\r\n result.setDate(result.getDate() + days);\r\n return result;\r\n }\r\n\r\n private addMonths(date: Date, months: number): Date {\r\n const result = new Date(date);\r\n result.setMonth(result.getMonth() + months);\r\n return result;\r\n }\r\n\r\n private formatDate(date: Date): string {\r\n const year = date.getFullYear();\r\n const month = String(date.getMonth() + 1).padStart(2, '0');\r\n const day = String(date.getDate()).padStart(2, '0');\r\n return `${year}-${month}-${day}`;\r\n }\r\n\r\n private parseDate(value: string): Date | null {\r\n if (!value) return null;\r\n // Parse YYYY-MM-DD format in local timezone to avoid UTC offset issues\r\n const match = value.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/);\r\n if (match) {\r\n const [, year, month, day] = match;\r\n const date = new Date(\r\n parseInt(year, 10),\r\n parseInt(month, 10) - 1,\r\n parseInt(day, 10)\r\n );\r\n date.setHours(0, 0, 0, 0);\r\n return date;\r\n }\r\n // Fallback for other formats\r\n const date = new Date(value);\r\n if (isNaN(date.getTime())) {\r\n console.warn(\r\n `bp-date-picker: Invalid date format \"${value}\". Expected YYYY-MM-DD.`\r\n );\r\n return null;\r\n }\r\n return date;\r\n }\r\n\r\n private getSelectedDate(): Date | null {\r\n return this.parseDate(this.value);\r\n }\r\n\r\n private getTodayDate(): Date {\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n return today;\r\n }\r\n\r\n private isSameDay(date1: Date, date2: Date): boolean {\r\n return (\r\n date1.getFullYear() === date2.getFullYear() &&\r\n date1.getMonth() === date2.getMonth() &&\r\n date1.getDate() === date2.getDate()\r\n );\r\n }\r\n\r\n private isDateDisabled(date: Date): boolean {\r\n if (this.min) {\r\n const minDate = this.parseDate(this.min);\r\n if (minDate && date < minDate) return true;\r\n }\r\n if (this.max) {\r\n const maxDate = this.parseDate(this.max);\r\n if (maxDate && date > maxDate) return true;\r\n }\r\n return false;\r\n }\r\n\r\n private getCalendarDays(): Date[] {\r\n const CALENDAR_GRID_SIZE = 42; // 6 weeks × 7 days for consistent grid\r\n const firstDay = new Date(this.displayYear, this.displayMonth, 1);\r\n const lastDay = new Date(this.displayYear, this.displayMonth + 1, 0);\r\n\r\n const startDayOfWeek = this.firstDayOfWeek === '1' ? 1 : 0;\r\n let dayOfWeek = firstDay.getDay() - startDayOfWeek;\r\n if (dayOfWeek < 0) dayOfWeek += 7;\r\n\r\n const days: Date[] = [];\r\n\r\n // Add previous month's days\r\n for (let i = dayOfWeek - 1; i >= 0; i--) {\r\n const date = new Date(this.displayYear, this.displayMonth, -i);\r\n days.push(date);\r\n }\r\n\r\n // Add current month's days\r\n for (let i = 1; i <= lastDay.getDate(); i++) {\r\n days.push(new Date(this.displayYear, this.displayMonth, i));\r\n }\r\n\r\n // Add next month's days to complete the grid\r\n const remainingDays = CALENDAR_GRID_SIZE - days.length;\r\n for (let i = 1; i <= remainingDays; i++) {\r\n days.push(new Date(this.displayYear, this.displayMonth + 1, i));\r\n }\r\n\r\n return days;\r\n }\r\n\r\n public checkValidity(): boolean {\r\n // Check required validation\r\n if (this.required && !this.value) {\r\n return false;\r\n }\r\n // Check min/max validation\r\n if (this.value) {\r\n const date = this.parseDate(this.value);\r\n if (date && this.isDateDisabled(date)) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n private getWeekdayNames(): string[] {\r\n const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\r\n if (this.firstDayOfWeek === '1') {\r\n return [...weekdays.slice(1), weekdays[0]];\r\n }\r\n return weekdays;\r\n }\r\n\r\n private getMonthName(month: number): string {\r\n return new Date(2000, month, 1).toLocaleString('default', {\r\n month: 'long',\r\n });\r\n }\r\n\r\n private getFormattedValue(): string {\r\n const selectedDate = this.getSelectedDate();\r\n if (!selectedDate) return '';\r\n return selectedDate.toLocaleDateString();\r\n }\r\n\r\n render() {\r\n const selectedDate = this.getSelectedDate();\r\n const today = this.getTodayDate();\r\n const calendarDays = this.getCalendarDays();\r\n const weekdays = this.getWeekdayNames();\r\n const hasValue = !!this.value;\r\n\r\n const datePickerClasses = {\r\n 'date-picker': true,\r\n 'date-picker--open': this.isOpen,\r\n 'date-picker--disabled': this.disabled,\r\n [`date-picker--${this.size}`]: true,\r\n };\r\n\r\n return html`\r\n <div class=${classMap(datePickerClasses)} part=\"control\">\r\n <div class=\"date-picker__input-wrapper\">\r\n <input\r\n type=\"text\"\r\n class=\"date-picker__input\"\r\n part=\"input\"\r\n .value=${this.getFormattedValue()}\r\n placeholder=${this.placeholder}\r\n ?disabled=${this.disabled}\r\n ?required=${this.required}\r\n readonly\r\n @click=${this.handleInputClick}\r\n @keydown=${this.handleKeyDown}\r\n role=\"combobox\"\r\n aria-haspopup=\"grid\"\r\n aria-expanded=${this.isOpen}\r\n aria-disabled=${this.disabled}\r\n aria-label=${this.label || this.placeholder || 'Date picker'}\r\n />\r\n ${hasValue && !this.disabled\r\n ? html`\r\n <button\r\n type=\"button\"\r\n class=\"date-picker__clear\"\r\n part=\"clear-button\"\r\n @click=${this.handleClear}\r\n aria-label=\"Clear date\"\r\n tabindex=\"-1\"\r\n >\r\n ✕\r\n </button>\r\n `\r\n : ''}\r\n <div class=\"date-picker__indicator\" part=\"indicator\">\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M5 2V4M11 2V4M3 6H13M4 4H12C12.5523 4 13 4.44772 13 5V13C13 13.5523 12.5523 14 12 14H4C3.44772 14 3 13.5523 3 13V5C3 4.44772 3.44772 4 4 4Z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n ${this.isOpen\r\n ? html`\r\n <div class=\"date-picker__calendar\" part=\"calendar\" role=\"grid\">\r\n <div class=\"date-picker__header\" part=\"header\">\r\n <button\r\n type=\"button\"\r\n class=\"date-picker__nav-button\"\r\n part=\"nav-button\"\r\n @click=${this.handlePreviousMonth}\r\n aria-label=\"Previous month\"\r\n tabindex=\"-1\"\r\n >\r\n ‹\r\n </button>\r\n <div class=\"date-picker__month-year\" part=\"month-year\">\r\n ${this.getMonthName(this.displayMonth)} ${this.displayYear}\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"date-picker__nav-button\"\r\n part=\"nav-button\"\r\n @click=${this.handleNextMonth}\r\n aria-label=\"Next month\"\r\n tabindex=\"-1\"\r\n >\r\n ›\r\n </button>\r\n </div>\r\n\r\n <div class=\"date-picker__weekdays\">\r\n ${weekdays.map(\r\n (day) => html`\r\n <div\r\n class=\"date-picker__weekday\"\r\n part=\"weekday\"\r\n role=\"columnheader\"\r\n >\r\n ${day}\r\n </div>\r\n `\r\n )}\r\n </div>\r\n\r\n <div class=\"date-picker__days\">\r\n ${calendarDays.map((date) => {\r\n const isCurrentMonth =\r\n date.getMonth() === this.displayMonth;\r\n const isSelected =\r\n selectedDate && this.isSameDay(date, selectedDate);\r\n const isToday = this.isSameDay(date, today);\r\n const isFocused =\r\n this.focusedDate &&\r\n this.isSameDay(date, this.focusedDate);\r\n const isDisabled = this.isDateDisabled(date);\r\n\r\n const dayClasses = {\r\n 'date-picker__day': true,\r\n 'date-picker__day--other-month': !isCurrentMonth,\r\n 'date-picker__day--selected': !!isSelected,\r\n 'date-picker__day--today': isToday,\r\n 'date-picker__day--focused': !!isFocused,\r\n 'date-picker__day--disabled': isDisabled,\r\n };\r\n\r\n return html`\r\n <button\r\n type=\"button\"\r\n class=${classMap(dayClasses)}\r\n part=\"day\"\r\n @click=${() =>\r\n !isDisabled && this.handleDateSelect(date)}\r\n ?disabled=${isDisabled}\r\n tabindex=\"-1\"\r\n role=\"gridcell\"\r\n aria-selected=${!!isSelected}\r\n aria-label=${date.toLocaleDateString()}\r\n >\r\n ${date.getDate()}\r\n </button>\r\n `;\r\n })}\r\n </div>\r\n </div>\r\n `\r\n : ''}\r\n ${this.name\r\n ? html`\r\n <input type=\"hidden\" name=${this.name} .value=${this.value} />\r\n `\r\n : ''}\r\n </div>\r\n `;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n 'bp-date-picker': BpDatePicker;\r\n }\r\n}\r\n"],"names":["datePickerStyles","css","BpDatePicker","LitElement","date","previousValue","event","currentFocus","days","result","months","year","month","day","value","match","today","date1","date2","minDate","maxDate","firstDay","lastDay","startDayOfWeek","dayOfWeek","i","remainingDays","weekdays","selectedDate","calendarDays","hasValue","datePickerClasses","html","classMap","isCurrentMonth","isSelected","isToday","isFocused","isDisabled","__decorateClass","property","state","customElement"],"mappings":";;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}
|
|
1
|
+
{"version":3,"file":"date-picker.js","sources":["../../source/components/date-picker/date-picker.style.ts","../../source/components/date-picker/date-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const datePickerStyles = css`\n /* Base */\n .date-picker {\n position: relative;\n width: 100%;\n }\n\n .date-picker__input-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .date-picker__input {\n flex: 1;\n padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n padding-right: var(--bp-spacing-2xl);\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-base);\n color: var(--bp-color-text);\n background-color: var(--bp-color-surface);\n border: var(--bp-border-width) solid var(--bp-color-border);\n border-radius: var(--bp-border-radius-md);\n cursor: pointer;\n transition:\n border-color var(--bp-transition-fast),\n box-shadow var(--bp-transition-fast);\n outline: none;\n }\n\n .date-picker__input:hover:not(:disabled) {\n border-color: var(--bp-color-primary);\n }\n\n .date-picker__input:focus {\n border-color: var(--bp-color-focus);\n box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);\n }\n\n .date-picker__input:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .date-picker__input::placeholder {\n color: var(--bp-color-text-muted);\n }\n\n .date-picker__clear {\n position: absolute;\n right: var(--bp-spacing-2xl);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--bp-spacing-lg);\n height: var(--bp-spacing-lg);\n padding: 0;\n font-size: var(--bp-font-size-sm);\n color: var(--bp-color-text-muted);\n background: none;\n border: none;\n border-radius: var(--bp-border-radius-sm);\n cursor: pointer;\n transition:\n color var(--bp-transition-fast),\n background-color var(--bp-transition-fast);\n }\n\n .date-picker__clear:hover {\n color: var(--bp-color-primary);\n background-color: color-mix(\n in srgb,\n var(--bp-color-primary) 8%,\n transparent\n );\n }\n\n .date-picker__indicator {\n position: absolute;\n right: var(--bp-spacing-md);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--bp-spacing-lg);\n height: var(--bp-spacing-lg);\n color: var(--bp-color-text-muted);\n pointer-events: none;\n }\n\n /* Calendar */\n .date-picker__calendar {\n position: absolute;\n top: calc(100% + var(--bp-spacing-xs));\n left: 0;\n z-index: var(--bp-z-dropdown);\n min-width: var(--bp-spacing-2xl);\n padding: var(--bp-spacing-md);\n background-color: var(--bp-color-surface);\n border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);\n border-right: var(--bp-border-width) solid var(--bp-color-border);\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n border-left: var(--bp-border-width) solid var(--bp-color-border);\n border-radius: var(--bp-border-radius-md);\n box-shadow: var(--bp-shadow-md);\n }\n\n /* Header */\n .date-picker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--bp-spacing-sm);\n }\n\n .date-picker__nav-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--bp-spacing-xl);\n height: var(--bp-spacing-xl);\n padding: 0;\n font-size: var(--bp-font-size-xl);\n color: var(--bp-color-text);\n background: none;\n border: none;\n border-radius: var(--bp-border-radius-sm);\n cursor: pointer;\n transition: background-color var(--bp-transition-fast);\n }\n\n .date-picker__nav-button:hover {\n background-color: color-mix(\n in srgb,\n var(--bp-color-primary) 8%,\n transparent\n );\n }\n\n .date-picker__month-year {\n flex: 1;\n font-size: var(--bp-font-size-base);\n font-weight: var(--bp-font-weight-semibold);\n color: var(--bp-color-text);\n text-align: center;\n }\n\n /* Weekdays */\n .date-picker__weekdays {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: var(--bp-spacing-xs);\n margin-bottom: var(--bp-spacing-xs);\n }\n\n .date-picker__weekday {\n padding: var(--bp-spacing-xs);\n font-size: var(--bp-font-size-xs);\n font-weight: var(--bp-font-weight-semibold);\n color: var(--bp-color-text-muted);\n text-align: center;\n text-transform: uppercase;\n }\n\n /* Days */\n .date-picker__days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: var(--bp-spacing-xs);\n }\n\n .date-picker__day {\n aspect-ratio: 1;\n padding: var(--bp-spacing-xs);\n font-size: var(--bp-font-size-sm);\n color: var(--bp-color-text);\n background: none;\n border: none;\n border-radius: var(--bp-border-radius-sm);\n cursor: pointer;\n transition:\n background-color var(--bp-transition-fast),\n color var(--bp-transition-fast);\n }\n\n .date-picker__day:hover:not(:disabled) {\n background-color: color-mix(\n in srgb,\n var(--bp-color-primary) 8%,\n transparent\n );\n }\n\n .date-picker__day--other-month {\n color: var(--bp-color-text-muted);\n opacity: 0.5;\n }\n\n .date-picker__day--today {\n font-weight: var(--bp-font-weight-bold);\n color: var(--bp-color-primary);\n background-color: color-mix(\n in srgb,\n var(--bp-color-primary) 4%,\n transparent\n );\n }\n\n .date-picker__day--selected {\n color: var(--bp-color-text-inverse);\n background-color: var(--bp-color-primary);\n }\n\n .date-picker__day--selected:hover:not(:disabled) {\n background-color: var(--bp-color-primary-hover);\n }\n\n .date-picker__day--focused {\n outline: var(--bp-focus-width) solid var(--bp-color-primary);\n outline-offset: calc(-1 * var(--bp-focus-width));\n }\n\n .date-picker__day--disabled {\n color: var(--bp-color-text-muted);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* Sizes */\n .date-picker--sm .date-picker__input {\n padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n padding-right: var(--bp-spacing-xl);\n font-size: var(--bp-font-size-sm);\n }\n\n .date-picker--sm .date-picker__indicator {\n right: var(--bp-spacing-xs);\n width: var(--bp-spacing-md);\n height: var(--bp-spacing-md);\n }\n\n .date-picker--sm .date-picker__clear {\n right: var(--bp-spacing-xl);\n width: var(--bp-spacing-md);\n height: var(--bp-spacing-md);\n }\n\n .date-picker--sm .date-picker__calendar {\n padding: var(--bp-spacing-sm);\n }\n\n .date-picker--sm .date-picker__nav-button {\n width: var(--bp-spacing-lg);\n height: var(--bp-spacing-lg);\n font-size: var(--bp-font-size-lg);\n }\n\n .date-picker--sm .date-picker__month-year {\n font-size: var(--bp-font-size-sm);\n }\n\n .date-picker--sm .date-picker__header {\n margin-bottom: var(--bp-spacing-xs);\n }\n\n .date-picker--sm .date-picker__weekdays {\n gap: var(--bp-spacing-2xs);\n margin-bottom: var(--bp-spacing-2xs);\n }\n\n .date-picker--sm .date-picker__weekday {\n padding: var(--bp-spacing-2xs);\n font-size: var(--bp-font-size-xs);\n }\n\n .date-picker--sm .date-picker__days {\n gap: var(--bp-spacing-2xs);\n }\n\n .date-picker--sm .date-picker__day {\n padding: var(--bp-spacing-2xs);\n font-size: var(--bp-font-size-xs);\n }\n\n .date-picker--lg .date-picker__input {\n padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n padding-right: var(--bp-spacing-24);\n font-size: var(--bp-font-size-lg);\n }\n\n .date-picker--lg .date-picker__indicator {\n right: var(--bp-spacing-md);\n width: var(--bp-spacing-xl);\n height: var(--bp-spacing-xl);\n }\n\n .date-picker--lg .date-picker__clear {\n right: var(--bp-spacing-24);\n width: var(--bp-spacing-xl);\n height: var(--bp-spacing-xl);\n }\n\n .date-picker--lg .date-picker__calendar {\n padding: var(--bp-spacing-lg);\n }\n\n .date-picker--lg .date-picker__nav-button {\n width: var(--bp-spacing-2xl);\n height: var(--bp-spacing-2xl);\n font-size: var(--bp-font-size-2xl);\n }\n\n .date-picker--lg .date-picker__month-year {\n font-size: var(--bp-font-size-lg);\n }\n\n .date-picker--lg .date-picker__header {\n margin-bottom: var(--bp-spacing-md);\n }\n\n .date-picker--lg .date-picker__weekdays {\n gap: var(--bp-spacing-sm);\n margin-bottom: var(--bp-spacing-sm);\n }\n\n .date-picker--lg .date-picker__weekday {\n padding: var(--bp-spacing-sm);\n font-size: var(--bp-font-size-sm);\n }\n\n .date-picker--lg .date-picker__days {\n gap: var(--bp-spacing-sm);\n }\n\n .date-picker--lg .date-picker__day {\n padding: var(--bp-spacing-sm);\n font-size: var(--bp-font-size-base);\n }\n\n /* States */\n .date-picker--disabled {\n opacity: 0.6;\n pointer-events: none;\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { datePickerStyles } from './date-picker.style.js';\n\nexport type DatePickerSize = 'sm' | 'md' | 'lg';\n\n/**\n * A calendar-based date picker component.\n *\n * @element bp-date-picker\n *\n * @fires bp-change - Fired when the selected date changes\n *\n * @csspart control - The outer container\n * @csspart input - The text input field\n * @csspart indicator - The calendar icon\n * @csspart clear-button - The clear button\n * @csspart calendar - The calendar dropdown\n * @csspart header - The calendar header with navigation\n * @csspart nav-button - Month/year navigation buttons\n * @csspart month-year - Month and year display\n * @csspart weekday - Day of week header cell\n * @csspart day - Individual day cell\n */\n@customElement('bp-date-picker')\nexport class BpDatePicker extends LitElement {\n @property({ type: String, reflect: true }) declare value: string;\n @property({ type: String }) declare name: string;\n @property({ type: String }) declare label: string;\n @property({ type: String }) declare placeholder: string;\n @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n @property({ type: Boolean, reflect: true }) declare required: boolean;\n @property({ type: String, reflect: true }) declare size: DatePickerSize;\n @property({ type: String }) declare min: string;\n @property({ type: String }) declare max: string;\n @property({ type: String, attribute: 'first-day-of-week' })\n declare firstDayOfWeek: '0' | '1';\n\n @state() private isOpen = false;\n @state() private displayMonth = new Date().getMonth();\n @state() private displayYear = new Date().getFullYear();\n @state() private focusedDate: Date | null = null;\n\n static styles = [datePickerStyles];\n\n constructor() {\n super();\n this.value = '';\n this.name = '';\n this.label = '';\n this.placeholder = 'Select date...';\n this.disabled = false;\n this.required = false;\n this.size = 'md';\n this.min = '';\n this.max = '';\n this.firstDayOfWeek = '0';\n }\n\n private handleInputClick() {\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n }\n }\n\n private handlePreviousMonth() {\n if (this.displayMonth === 0) {\n this.displayMonth = 11;\n this.displayYear--;\n } else {\n this.displayMonth--;\n }\n }\n\n private handleNextMonth() {\n if (this.displayMonth === 11) {\n this.displayMonth = 0;\n this.displayYear++;\n } else {\n this.displayMonth++;\n }\n }\n\n private handleDateSelect(date: Date) {\n const previousValue = this.value;\n this.value = this.formatDate(date);\n this.isOpen = false;\n this.focusedDate = null;\n\n this.dispatchEvent(\n new CustomEvent('bp-change', {\n detail: {\n value: this.value,\n previousValue,\n date,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleClear(e: Event) {\n e.stopPropagation();\n const previousValue = this.value;\n this.value = '';\n this.focusedDate = null;\n\n this.dispatchEvent(\n new CustomEvent('bp-change', {\n detail: {\n value: '',\n previousValue,\n date: null,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleKeyDown(e: Event) {\n const event = e as globalThis.KeyboardEvent;\n if (!this.isOpen) {\n if (\n event.key === 'ArrowDown' ||\n event.key === 'Enter' ||\n event.key === ' '\n ) {\n event.preventDefault();\n this.isOpen = true;\n this.focusedDate = this.getSelectedDate() || this.getTodayDate();\n }\n return;\n }\n\n const currentFocus =\n this.focusedDate || this.getSelectedDate() || this.getTodayDate();\n\n switch (event.key) {\n case 'Escape':\n event.preventDefault();\n this.isOpen = false;\n this.focusedDate = null;\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.focusedDate = this.addDays(currentFocus, -1);\n this.updateDisplayMonth(this.focusedDate);\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n this.focusedDate = this.addDays(currentFocus, 1);\n this.updateDisplayMonth(this.focusedDate);\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.focusedDate = this.addDays(currentFocus, -7);\n this.updateDisplayMonth(this.focusedDate);\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusedDate = this.addDays(currentFocus, 7);\n this.updateDisplayMonth(this.focusedDate);\n break;\n\n case 'Home':\n event.preventDefault();\n this.focusedDate = new Date(\n currentFocus.getFullYear(),\n currentFocus.getMonth(),\n 1\n );\n break;\n\n case 'End':\n event.preventDefault();\n this.focusedDate = new Date(\n currentFocus.getFullYear(),\n currentFocus.getMonth() + 1,\n 0\n );\n break;\n\n case 'PageUp':\n event.preventDefault();\n this.focusedDate = this.addMonths(\n currentFocus,\n event.shiftKey ? -12 : -1\n );\n this.updateDisplayMonth(this.focusedDate);\n break;\n\n case 'PageDown':\n event.preventDefault();\n this.focusedDate = this.addMonths(\n currentFocus,\n event.shiftKey ? 12 : 1\n );\n this.updateDisplayMonth(this.focusedDate);\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (this.focusedDate && !this.isDateDisabled(this.focusedDate)) {\n this.handleDateSelect(this.focusedDate);\n }\n break;\n }\n }\n\n private updateDisplayMonth(date: Date) {\n this.displayMonth = date.getMonth();\n this.displayYear = date.getFullYear();\n }\n\n private addDays(date: Date, days: number): Date {\n const result = new Date(date);\n result.setDate(result.getDate() + days);\n return result;\n }\n\n private addMonths(date: Date, months: number): Date {\n const result = new Date(date);\n result.setMonth(result.getMonth() + months);\n return result;\n }\n\n private formatDate(date: Date): string {\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const day = String(date.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n }\n\n private parseDate(value: string): Date | null {\n if (!value) return null;\n // Parse YYYY-MM-DD format in local timezone to avoid UTC offset issues\n const match = value.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/);\n if (match) {\n const [, year, month, day] = match;\n const date = new Date(\n parseInt(year, 10),\n parseInt(month, 10) - 1,\n parseInt(day, 10)\n );\n date.setHours(0, 0, 0, 0);\n return date;\n }\n // Fallback for other formats\n const date = new Date(value);\n if (isNaN(date.getTime())) {\n console.warn(\n `bp-date-picker: Invalid date format \"${value}\". Expected YYYY-MM-DD.`\n );\n return null;\n }\n return date;\n }\n\n private getSelectedDate(): Date | null {\n return this.parseDate(this.value);\n }\n\n private getTodayDate(): Date {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n return today;\n }\n\n private isSameDay(date1: Date, date2: Date): boolean {\n return (\n date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate()\n );\n }\n\n private isDateDisabled(date: Date): boolean {\n if (this.min) {\n const minDate = this.parseDate(this.min);\n if (minDate && date < minDate) return true;\n }\n if (this.max) {\n const maxDate = this.parseDate(this.max);\n if (maxDate && date > maxDate) return true;\n }\n return false;\n }\n\n private getCalendarDays(): Date[] {\n const CALENDAR_GRID_SIZE = 42; // 6 weeks × 7 days for consistent grid\n const firstDay = new Date(this.displayYear, this.displayMonth, 1);\n const lastDay = new Date(this.displayYear, this.displayMonth + 1, 0);\n\n const startDayOfWeek = this.firstDayOfWeek === '1' ? 1 : 0;\n let dayOfWeek = firstDay.getDay() - startDayOfWeek;\n if (dayOfWeek < 0) dayOfWeek += 7;\n\n const days: Date[] = [];\n\n // Add previous month's days\n for (let i = dayOfWeek - 1; i >= 0; i--) {\n const date = new Date(this.displayYear, this.displayMonth, -i);\n days.push(date);\n }\n\n // Add current month's days\n for (let i = 1; i <= lastDay.getDate(); i++) {\n days.push(new Date(this.displayYear, this.displayMonth, i));\n }\n\n // Add next month's days to complete the grid\n const remainingDays = CALENDAR_GRID_SIZE - days.length;\n for (let i = 1; i <= remainingDays; i++) {\n days.push(new Date(this.displayYear, this.displayMonth + 1, i));\n }\n\n return days;\n }\n\n public checkValidity(): boolean {\n // Check required validation\n if (this.required && !this.value) {\n return false;\n }\n // Check min/max validation\n if (this.value) {\n const date = this.parseDate(this.value);\n if (date && this.isDateDisabled(date)) {\n return false;\n }\n }\n return true;\n }\n\n private getWeekdayNames(): string[] {\n const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n if (this.firstDayOfWeek === '1') {\n return [...weekdays.slice(1), weekdays[0]];\n }\n return weekdays;\n }\n\n private getMonthName(month: number): string {\n return new Date(2000, month, 1).toLocaleString('default', {\n month: 'long',\n });\n }\n\n private getFormattedValue(): string {\n const selectedDate = this.getSelectedDate();\n if (!selectedDate) return '';\n return selectedDate.toLocaleDateString();\n }\n\n render() {\n const selectedDate = this.getSelectedDate();\n const today = this.getTodayDate();\n const calendarDays = this.getCalendarDays();\n const weekdays = this.getWeekdayNames();\n const hasValue = !!this.value;\n\n const datePickerClasses = {\n 'date-picker': true,\n 'date-picker--open': this.isOpen,\n 'date-picker--disabled': this.disabled,\n [`date-picker--${this.size}`]: true,\n };\n\n return html`\n <div class=${classMap(datePickerClasses)} part=\"control\">\n <div class=\"date-picker__input-wrapper\">\n <input\n type=\"text\"\n class=\"date-picker__input\"\n part=\"input\"\n .value=${this.getFormattedValue()}\n placeholder=${this.placeholder}\n ?disabled=${this.disabled}\n ?required=${this.required}\n readonly\n @click=${this.handleInputClick}\n @keydown=${this.handleKeyDown}\n role=\"combobox\"\n aria-haspopup=\"grid\"\n aria-expanded=${this.isOpen}\n aria-disabled=${this.disabled}\n aria-label=${this.label || this.placeholder || 'Date picker'}\n />\n ${hasValue && !this.disabled\n ? html`\n <button\n type=\"button\"\n class=\"date-picker__clear\"\n part=\"clear-button\"\n @click=${this.handleClear}\n aria-label=\"Clear date\"\n tabindex=\"-1\"\n >\n ✕\n </button>\n `\n : ''}\n <div class=\"date-picker__indicator\" part=\"indicator\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M5 2V4M11 2V4M3 6H13M4 4H12C12.5523 4 13 4.44772 13 5V13C13 13.5523 12.5523 14 12 14H4C3.44772 14 3 13.5523 3 13V5C3 4.44772 3.44772 4 4 4Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n\n ${this.isOpen\n ? html`\n <div class=\"date-picker__calendar\" part=\"calendar\" role=\"grid\">\n <div class=\"date-picker__header\" part=\"header\">\n <button\n type=\"button\"\n class=\"date-picker__nav-button\"\n part=\"nav-button\"\n @click=${this.handlePreviousMonth}\n aria-label=\"Previous month\"\n tabindex=\"-1\"\n >\n ‹\n </button>\n <div class=\"date-picker__month-year\" part=\"month-year\">\n ${this.getMonthName(this.displayMonth)} ${this.displayYear}\n </div>\n <button\n type=\"button\"\n class=\"date-picker__nav-button\"\n part=\"nav-button\"\n @click=${this.handleNextMonth}\n aria-label=\"Next month\"\n tabindex=\"-1\"\n >\n ›\n </button>\n </div>\n\n <div class=\"date-picker__weekdays\">\n ${weekdays.map(\n (day) => html`\n <div\n class=\"date-picker__weekday\"\n part=\"weekday\"\n role=\"columnheader\"\n >\n ${day}\n </div>\n `\n )}\n </div>\n\n <div class=\"date-picker__days\">\n ${calendarDays.map((date) => {\n const isCurrentMonth =\n date.getMonth() === this.displayMonth;\n const isSelected =\n selectedDate && this.isSameDay(date, selectedDate);\n const isToday = this.isSameDay(date, today);\n const isFocused =\n this.focusedDate &&\n this.isSameDay(date, this.focusedDate);\n const isDisabled = this.isDateDisabled(date);\n\n const dayClasses = {\n 'date-picker__day': true,\n 'date-picker__day--other-month': !isCurrentMonth,\n 'date-picker__day--selected': !!isSelected,\n 'date-picker__day--today': isToday,\n 'date-picker__day--focused': !!isFocused,\n 'date-picker__day--disabled': isDisabled,\n };\n\n return html`\n <button\n type=\"button\"\n class=${classMap(dayClasses)}\n part=\"day\"\n @click=${() =>\n !isDisabled && this.handleDateSelect(date)}\n ?disabled=${isDisabled}\n tabindex=\"-1\"\n role=\"gridcell\"\n aria-selected=${!!isSelected}\n aria-label=${date.toLocaleDateString()}\n >\n ${date.getDate()}\n </button>\n `;\n })}\n </div>\n </div>\n `\n : ''}\n ${this.name\n ? html`\n <input type=\"hidden\" name=${this.name} .value=${this.value} />\n `\n : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-date-picker': BpDatePicker;\n }\n}\n"],"names":["datePickerStyles","css","BpDatePicker","LitElement","date","previousValue","event","currentFocus","days","result","months","year","month","day","value","match","today","date1","date2","minDate","maxDate","firstDay","lastDay","startDayOfWeek","dayOfWeek","i","remainingDays","weekdays","selectedDate","calendarDays","hasValue","datePickerClasses","html","classMap","isCurrentMonth","isSelected","isToday","isFocused","isDisabled","__decorateClass","property","state","customElement"],"mappings":";;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.js","sources":["../../source/components/divider/divider.style.ts","../../source/components/divider/divider.ts"],"sourcesContent":["import { css } from 'lit';\
|
|
1
|
+
{"version":3,"file":"divider.js","sources":["../../source/components/divider/divider.style.ts","../../source/components/divider/divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const dividerStyles = css`\n /* Base styles */\n :host {\n display: block;\n }\n\n :host([orientation='vertical']) {\n display: inline-flex;\n height: 100%;\n }\n\n .divider {\n display: flex;\n align-items: center;\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-xs);\n color: var(--bp-color-text-muted);\n }\n\n .divider__line {\n flex: 1;\n border: none;\n border-top: var(--bp-border-width) solid var(--bp-color-border);\n transition:\n border-color 150ms ease,\n border-width 150ms ease;\n }\n\n .divider__content {\n display: inline-flex;\n padding: 0 var(--bp-spacing-md);\n white-space: nowrap;\n min-width: fit-content;\n }\n\n .divider__content {\n font-weight: var(--bp-font-weight-semibold);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--bp-color-text-muted);\n }\n\n /* Orientations */\n .divider--horizontal {\n width: 100%;\n flex-direction: row;\n }\n\n .divider--vertical {\n height: 100%;\n flex-direction: column;\n align-self: stretch;\n }\n\n .divider--vertical .divider__line {\n width: var(--bp-border-width);\n height: auto;\n border-top: none;\n border-left: var(--bp-border-width) solid var(--bp-color-border);\n }\n\n /* Spacing */\n .divider--spacing-sm {\n margin: var(--bp-spacing-sm) 0;\n }\n\n .divider--spacing-sm.divider--vertical {\n margin: 0 var(--bp-spacing-sm);\n }\n\n .divider--spacing-md {\n margin: var(--bp-spacing-md) 0;\n }\n\n .divider--spacing-md.divider--vertical {\n margin: 0 var(--bp-spacing-md);\n }\n\n .divider--spacing-lg {\n margin: var(--bp-spacing-lg) 0;\n }\n\n .divider--spacing-lg.divider--vertical {\n margin: 0 var(--bp-spacing-lg);\n }\n\n /* Variants */\n .divider__line--dashed {\n border-top-style: dashed;\n }\n\n .divider__line--dotted {\n border-top-style: dotted;\n }\n\n .divider--vertical .divider__line--dashed {\n border-top-style: none;\n border-left-style: dashed;\n }\n\n .divider--vertical .divider__line--dotted {\n border-top-style: none;\n border-left-style: dotted;\n }\n\n /* Color variants */\n :host([color='default']) .divider__line {\n border-color: var(--bp-color-border);\n }\n\n :host([color='subtle']) .divider__line {\n border-color: var(--bp-color-border);\n opacity: 0.5;\n }\n\n :host([color='accent']) .divider__line {\n border-color: var(--bp-color-primary);\n }\n\n /* Weight variants */\n :host([weight='thin']) .divider__line {\n border-top-width: var(--bp-border-width);\n }\n\n :host([weight='medium']) .divider__line {\n border-top-width: calc(var(--bp-border-width) * 2);\n }\n\n :host([weight='thick']) .divider__line {\n border-top-width: calc(var(--bp-border-width) * 3);\n }\n\n :host([weight='thin'][orientation='vertical']) .divider__line {\n border-left-width: var(--bp-border-width);\n border-top-width: 0;\n }\n\n :host([weight='medium'][orientation='vertical']) .divider__line {\n border-left-width: calc(var(--bp-border-width) * 2);\n border-top-width: 0;\n }\n\n :host([weight='thick'][orientation='vertical']) .divider__line {\n border-left-width: calc(var(--bp-border-width) * 3);\n border-top-width: 0;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { dividerStyles } from './divider.style.js';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerSpacing = 'sm' | 'md' | 'lg';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\nexport type DividerColor = 'default' | 'subtle' | 'accent';\nexport type DividerWeight = 'thin' | 'medium' | 'thick';\n\n/**\n * A divider component that provides visual separation between content sections.\n * Supports both horizontal and vertical orientations with optional text labels.\n */\n@customElement('bp-divider')\nexport class BpDivider extends LitElement {\n /**\n * Orientation of the divider.\n * @type {'horizontal' | 'vertical'}\n * @default 'horizontal'\n */\n @property({ type: String, reflect: true })\n declare orientation: DividerOrientation;\n\n /**\n * Spacing variant for the divider.\n * @type {'sm' | 'md' | 'lg'}\n * @default 'md'\n */\n @property({ type: String, reflect: true }) declare spacing: DividerSpacing;\n\n /**\n * Visual variant of the divider line.\n * @type {'solid' | 'dashed' | 'dotted'}\n * @default 'solid'\n */\n @property({ type: String, reflect: true }) declare variant: DividerVariant;\n\n /**\n * Color variant for the divider line.\n * @type {'default' | 'subtle' | 'accent'}\n * @default 'default'\n */\n @property({ type: String, reflect: true }) declare color: DividerColor;\n\n /**\n * Border weight for the divider line.\n * @type {'thin' | 'medium' | 'thick'}\n * @default 'thin'\n */\n @property({ type: String, reflect: true }) declare weight: DividerWeight;\n\n /** Whether the default slot has content. */\n @property({ attribute: false }) declare hasContent: boolean;\n\n static styles = [dividerStyles];\n\n constructor() {\n super();\n this.orientation = 'horizontal';\n this.spacing = 'md';\n this.variant = 'solid';\n this.color = 'default';\n this.weight = 'thin';\n this.hasContent = false;\n }\n\n private handleSlotChange = (event: Event) => {\n const slot = event.target as HTMLElement & {\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\n };\n const nodes = slot.assignedNodes({ flatten: true });\n this.hasContent = nodes.some(\n (node) =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n );\n };\n\n render() {\n return html`\n <div\n class=\"divider divider--${this.orientation} divider--spacing-${this\n .spacing}\"\n role=\"separator\"\n aria-orientation=\"${this.orientation}\"\n part=\"divider\"\n >\n <span\n class=\"divider__line divider__line--${this.variant}\"\n part=\"line\"\n ></span>\n ${this.orientation === 'horizontal'\n ? html`\n ${this.hasContent\n ? html`<span class=\"divider__content\" part=\"content\">\n <slot @slotchange=${this.handleSlotChange}></slot>\n </span>\n <span\n class=\"divider__line divider__line--${this.variant}\"\n part=\"line\"\n ></span>`\n : html`<slot @slotchange=${this.handleSlotChange}></slot>`}\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-divider': BpDivider;\n }\n}\n"],"names":["dividerStyles","css","BpDivider","LitElement","event","nodes","node","html","nothing","__decorateClass","property","customElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sources":["../../source/components/drawer/drawer.style.ts","../../source/components/drawer/drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const drawerStyles = css`\n /* Base styles */\n :host {\n display: contents;\n }\n\n .drawer {\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-base);\n color: var(--bp-color-text);\n }\n\n /* Overlay mode */\n .drawer--overlay {\n position: fixed;\n inset: 0;\n z-index: var(--bp-z-modal);\n pointer-events: none;\n }\n\n .drawer--overlay.drawer--open {\n pointer-events: auto;\n }\n\n /* Backdrop */\n .backdrop {\n position: absolute;\n inset: 0;\n background-color: oklch(from var(--bp-color-text) l c h / 0.5);\n opacity: 0;\n transition: opacity var(--bp-transition-base) ease-out;\n }\n\n .backdrop--visible {\n opacity: 1;\n }\n\n /* Panel base */\n .panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n background-color: var(--bp-color-surface);\n box-shadow: var(--bp-shadow-xl);\n transition: transform var(--bp-transition-base) ease-out;\n overflow: hidden;\n }\n\n .drawer--overlay .panel:focus {\n outline: none;\n }\n\n /* Horizontal drawers (left/right) */\n .drawer--horizontal .panel {\n top: 0;\n bottom: 0;\n height: 100%;\n }\n\n .drawer--left .panel {\n left: 0;\n transform: translateX(-100%);\n }\n\n .drawer--left .panel--open {\n transform: translateX(0);\n }\n\n .drawer--right .panel {\n right: 0;\n transform: translateX(100%);\n }\n\n .drawer--right .panel--open {\n transform: translateX(0);\n }\n\n /* Vertical drawers (top/bottom) */\n .drawer--vertical .panel {\n left: 0;\n right: 0;\n width: 100%;\n }\n\n .drawer--top .panel {\n top: 0;\n transform: translateY(-100%);\n }\n\n .drawer--top .panel--open {\n transform: translateY(0);\n }\n\n .drawer--bottom .panel {\n bottom: 0;\n transform: translateY(100%);\n }\n\n .drawer--bottom .panel--open {\n transform: translateY(0);\n }\n\n /* Sizes - horizontal (width) */\n .drawer--horizontal.drawer--sm .panel {\n width: calc(var(--bp-spacing-24) * 3);\n }\n\n .drawer--horizontal.drawer--md .panel {\n width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n }\n\n .drawer--horizontal.drawer--lg .panel {\n width: var(--bp-breakpoint-sm);\n }\n\n .drawer--horizontal.drawer--full .panel {\n width: 100%;\n }\n\n /* Sizes - vertical (height) */\n .drawer--vertical.drawer--sm .panel {\n height: calc(var(--bp-spacing-24) * 2);\n }\n\n .drawer--vertical.drawer--md .panel {\n height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n }\n\n .drawer--vertical.drawer--lg .panel {\n height: calc(var(--bp-spacing-24) * 5);\n }\n\n .drawer--vertical.drawer--full .panel {\n height: 100%;\n }\n\n /* Header */\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--bp-spacing-4);\n padding: var(--bp-spacing-4) var(--bp-spacing-5);\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n flex-shrink: 0;\n }\n\n .header--empty {\n display: none;\n }\n\n .header ::slotted(*) {\n margin: 0;\n font-size: var(--bp-font-size-lg);\n font-weight: var(--bp-font-weight-semibold);\n }\n\n /* Body */\n .body {\n flex: 1;\n overflow-y: auto;\n padding: var(--bp-spacing-5);\n }\n\n /* Footer */\n .footer {\n display: flex;\n align-items: center;\n gap: var(--bp-spacing-4);\n padding: var(--bp-spacing-4) var(--bp-spacing-5);\n border-top: var(--bp-border-width) solid var(--bp-color-border);\n flex-shrink: 0;\n }\n\n /* Close button */\n .close-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n padding: 0;\n margin-left: auto;\n background: transparent;\n border: none;\n border-radius: var(--bp-border-radius-sm);\n color: var(--bp-color-text-muted);\n cursor: pointer;\n transition:\n background-color var(--bp-transition-fast),\n color var(--bp-transition-fast),\n transform var(--bp-transition-fast);\n }\n\n .close-button:hover {\n background-color: var(--bp-color-surface-subdued);\n color: var(--bp-color-text);\n }\n\n .close-button:active {\n background-color: var(--bp-color-surface-pressed);\n transform: translateY(1px);\n }\n\n .close-button:focus {\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n outline-offset: var(--bp-focus-offset);\n }\n\n .close-button:focus:not(:focus-visible) {\n outline: none;\n }\n\n .close-button:focus-visible {\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n outline-offset: var(--bp-focus-offset);\n }\n\n /* Inline mode - static sidebar */\n .drawer--inline {\n display: block;\n }\n\n .drawer--inline .panel {\n position: relative;\n transform: none;\n box-shadow: none;\n border: var(--bp-border-width) solid var(--bp-color-border);\n border-radius: var(--bp-border-radius-md);\n }\n\n .drawer--inline.drawer--horizontal {\n height: 100%;\n }\n\n .drawer--inline.drawer--vertical {\n width: 100%;\n }\n\n /* Inline sizes - horizontal */\n .drawer--inline.drawer--horizontal.drawer--small {\n width: calc(var(--bp-spacing-24) * 3);\n }\n\n .drawer--inline.drawer--horizontal.drawer--medium {\n width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n }\n\n .drawer--inline.drawer--horizontal.drawer--large {\n width: var(--bp-breakpoint-sm);\n }\n\n .drawer--inline.drawer--horizontal.drawer--full {\n width: 100%;\n }\n\n /* Inline sizes - vertical */\n .drawer--inline.drawer--vertical.drawer--small .panel {\n height: calc(var(--bp-spacing-24) * 2);\n }\n\n .drawer--inline.drawer--vertical.drawer--medium .panel {\n height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n }\n\n .drawer--inline.drawer--vertical.drawer--large .panel {\n height: calc(var(--bp-spacing-24) * 5);\n }\n\n .drawer--inline.drawer--vertical.drawer--full .panel {\n height: auto;\n }\n\n /* Border positioning for inline drawers */\n .drawer--inline.drawer--left .panel {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .drawer--inline.drawer--right .panel {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .drawer--inline.drawer--top .panel {\n border-top: none;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n .drawer--inline.drawer--bottom .panel {\n border-bottom: none;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n /* Reduced motion */\n @media (prefers-reduced-motion: reduce) {\n .panel {\n transition: none;\n }\n\n .backdrop {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { drawerStyles } from './drawer.style.js';\r\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\r\nimport '../icon/icon.js';\r\n\r\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\r\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\r\n\r\n/**\r\n * A slide-in panel component that can appear from any edge of the viewport.\r\n *\r\n * @fires bp-open - Fired when the drawer opens\r\n * @fires bp-close - Fired when the drawer closes (includes reason: 'escape' | 'backdrop' | 'close-button' | 'api')\r\n * @fires bp-after-open - Fired after open animation completes\r\n * @fires bp-after-close - Fired after close animation completes\r\n *\r\n * @slot - Default slot for drawer content\r\n * @slot header - Optional header content\r\n * @slot footer - Optional footer content\r\n *\r\n * @csspart drawer - The drawer container\r\n * @csspart backdrop - The backdrop overlay (when not inline)\r\n * @csspart panel - The drawer panel\r\n * @csspart header - The header section\r\n * @csspart body - The body/content section\r\n * @csspart footer - The footer section\r\n * @csspart close-button - The close button\r\n */\r\n@customElement('bp-drawer')\r\nexport class BpDrawer extends LitElement {\r\n /** Whether the drawer is open */\r\n @property({ type: Boolean, reflect: true }) declare open: boolean;\r\n\r\n /** Which edge the drawer slides in from */\r\n @property({\r\n type: String,\r\n reflect: true,\r\n converter: {\r\n fromAttribute: (value: string | null) => {\r\n const valid = ['left', 'right', 'top', 'bottom'];\r\n return value && valid.includes(value)\r\n ? (value as DrawerPlacement)\r\n : 'left';\r\n },\r\n },\r\n })\r\n declare placement: DrawerPlacement;\r\n\r\n /** Size of the drawer (width for left/right, height for top/bottom) */\r\n @property({\r\n type: String,\r\n reflect: true,\r\n converter: {\r\n fromAttribute: (value: string | null) => {\r\n const valid = ['sm', 'md', 'lg', 'full'];\r\n return value && valid.includes(value) ? (value as DrawerSize) : 'md';\r\n },\r\n },\r\n })\r\n declare size: DrawerSize;\r\n\r\n /** Whether to show the close button */\r\n @property({\r\n converter: booleanConverter,\r\n attribute: 'show-close',\r\n reflect: true,\r\n })\r\n declare showClose: boolean;\r\n\r\n /** Whether clicking the backdrop closes the drawer */\r\n @property({\r\n converter: booleanConverter,\r\n attribute: 'close-on-backdrop',\r\n reflect: true,\r\n })\r\n declare closeOnBackdrop: boolean;\r\n\r\n /** Whether pressing Escape closes the drawer */\r\n @property({\r\n converter: booleanConverter,\r\n attribute: 'close-on-escape',\r\n reflect: true,\r\n })\r\n declare closeOnEscape: boolean;\r\n\r\n /** Whether to show the backdrop overlay */\r\n @property({\r\n converter: booleanConverter,\r\n attribute: 'show-backdrop',\r\n reflect: true,\r\n })\r\n declare showBackdrop: boolean;\r\n\r\n /** Accessible label for the drawer */\r\n @property({ type: String }) declare label: string;\r\n\r\n /**\r\n * Whether the drawer is rendered inline (always visible, part of document flow).\r\n * When true, the drawer acts as a static sidebar without overlay behavior.\r\n */\r\n @property({ type: Boolean, reflect: true }) declare inline: boolean;\r\n\r\n /** Whether the drawer has a header slot content */\r\n @property({ type: Boolean, attribute: false }) private hasHeader = false;\r\n\r\n /** Whether the drawer has a footer slot content */\r\n @property({ type: Boolean, attribute: false }) private hasFooter = false;\r\n\r\n private previouslyFocusedElement: HTMLElement | null = null;\r\n\r\n static styles = [drawerStyles];\r\n\r\n constructor() {\r\n super();\r\n this.open = false;\r\n this.placement = 'left';\r\n this.size = 'md';\r\n this.showClose = true;\r\n this.closeOnBackdrop = true;\r\n this.closeOnEscape = true;\r\n this.showBackdrop = true;\r\n this.label = '';\r\n this.inline = false;\r\n }\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n this.addEventListener('keydown', this.handleKeyDown);\r\n }\r\n\r\n disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.removeEventListener('keydown', this.handleKeyDown);\r\n }\r\n\r\n /**\r\n * Open the drawer.\r\n * Sets open property to true and manages focus/scroll behavior.\r\n *\r\n * @fires bp-open - Emitted when the drawer opens\r\n * @fires bp-after-open - Emitted after open animation completes\r\n */\r\n show(): void {\r\n if (this.open) return;\r\n this.open = true;\r\n }\r\n\r\n /**\r\n * Close the drawer.\r\n * Sets open property to false if bp-close event is not prevented.\r\n *\r\n * @param reason - The reason the drawer was closed\r\n * @fires bp-close - Emitted when the drawer closes (cancelable)\r\n * @fires bp-after-close - Emitted after close animation completes\r\n */\r\n hide(reason: 'escape' | 'backdrop' | 'close-button' | 'api' = 'api'): void {\r\n if (!this.open) return;\r\n\r\n const event = new CustomEvent('bp-close', {\r\n detail: { reason },\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n });\r\n\r\n this.dispatchEvent(event);\r\n\r\n if (!event.defaultPrevented) {\r\n this.open = false;\r\n }\r\n }\r\n\r\n /**\r\n * Toggle the drawer open/closed state.\r\n * Calls hide() if open, show() if closed.\r\n */\r\n toggle(): void {\r\n if (this.open) {\r\n this.hide('api');\r\n } else {\r\n this.show();\r\n }\r\n }\r\n\r\n protected updated(changedProperties: Map<string, unknown>): void {\r\n if (changedProperties.has('open')) {\r\n if (this.open) {\r\n this.handleOpen();\r\n } else {\r\n this.handleClose();\r\n }\r\n }\r\n }\r\n\r\n private handleOpen(): void {\r\n if (!this.inline) {\r\n // Store currently focused element\r\n this.previouslyFocusedElement = document.activeElement as HTMLElement;\r\n\r\n // Prevent body scroll\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('bp-open', {\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n\r\n // Focus the drawer panel for accessibility\r\n this.updateComplete.then(() => {\r\n const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;\r\n panel?.focus();\r\n\r\n this.dispatchEvent(\r\n new CustomEvent('bp-after-open', {\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n });\r\n }\r\n\r\n private handleClose(): void {\r\n if (!this.inline) {\r\n // Restore body scroll\r\n document.body.style.overflow = '';\r\n\r\n // Restore focus\r\n if (this.previouslyFocusedElement) {\r\n this.previouslyFocusedElement.focus();\r\n this.previouslyFocusedElement = null;\r\n }\r\n }\r\n\r\n this.updateComplete.then(() => {\r\n this.dispatchEvent(\r\n new CustomEvent('bp-after-close', {\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n });\r\n }\r\n\r\n private handleKeyDown = (event: KeyboardEvent): void => {\r\n if (\r\n event.key === 'Escape' &&\r\n this.closeOnEscape &&\r\n this.open &&\r\n !this.inline\r\n ) {\r\n event.preventDefault();\r\n this.hide('escape');\r\n }\r\n };\r\n\r\n /**\r\n * Handles click events on the backdrop overlay.\r\n * Closes the drawer if closeOnBackdrop is true.\r\n */\r\n private handleBackdropClick = (): void => {\r\n if (this.closeOnBackdrop) {\r\n this.hide('backdrop');\r\n }\r\n };\r\n\r\n /**\r\n * Handles click events on the close button.\r\n * Closes the drawer with reason 'close-button'.\r\n */\r\n private handleCloseClick = (): void => {\r\n this.hide('close-button');\r\n };\r\n\r\n /**\r\n * Handles slot change events for the header slot.\r\n * Updates hasHeader state to control header visibility.\r\n *\r\n * @param event - The slotchange event\r\n */\r\n private handleHeaderSlotChange = (event: Event): void => {\r\n const slot = event.target as HTMLElement & {\r\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\r\n };\r\n this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\r\n };\r\n\r\n /**\r\n * Handles slot change events for the footer slot.\r\n * Updates hasFooter state to control footer visibility.\r\n *\r\n * @param event - The slotchange event\r\n */\r\n private handleFooterSlotChange = (event: Event): void => {\r\n const slot = event.target as HTMLElement & {\r\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\r\n };\r\n this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\r\n };\r\n\r\n render() {\r\n const isHorizontal =\r\n this.placement === 'left' || this.placement === 'right';\r\n\r\n // Inline mode: always visible, no backdrop, no overlay behavior\r\n if (this.inline) {\r\n return html`\r\n <aside\r\n class=\"drawer drawer--inline drawer--${this.placement} drawer--${this\r\n .size} ${isHorizontal ? 'drawer--horizontal' : 'drawer--vertical'}\"\r\n part=\"drawer\"\r\n role=\"complementary\"\r\n aria-label=${this.label || nothing}\r\n >\r\n <div class=\"panel\" part=\"panel\">\r\n ${this.hasHeader || this.showClose\r\n ? html`\r\n <header class=\"header\" part=\"header\">\r\n <slot\r\n name=\"header\"\r\n @slotchange=${this.handleHeaderSlotChange}\r\n ></slot>\r\n </header>\r\n `\r\n : html`<slot\r\n name=\"header\"\r\n @slotchange=${this.handleHeaderSlotChange}\r\n ></slot>`}\r\n <div class=\"body\" part=\"body\">\r\n <slot></slot>\r\n </div>\r\n ${this.hasFooter\r\n ? html`\r\n <footer class=\"footer\" part=\"footer\">\r\n <slot\r\n name=\"footer\"\r\n @slotchange=${this.handleFooterSlotChange}\r\n ></slot>\r\n </footer>\r\n `\r\n : html`<slot\r\n name=\"footer\"\r\n @slotchange=${this.handleFooterSlotChange}\r\n ></slot>`}\r\n </div>\r\n </aside>\r\n `;\r\n }\r\n\r\n // Overlay mode: slide-in panel with backdrop\r\n return html`\r\n <div\r\n class=\"drawer drawer--overlay drawer--${this.placement} drawer--${this\r\n .size} ${isHorizontal\r\n ? 'drawer--horizontal'\r\n : 'drawer--vertical'} ${this.open ? 'drawer--open' : ''}\"\r\n part=\"drawer\"\r\n >\r\n ${this.showBackdrop\r\n ? html`\r\n <div\r\n class=\"backdrop ${this.open ? 'backdrop--visible' : ''}\"\r\n part=\"backdrop\"\r\n @click=${this.handleBackdropClick}\r\n aria-hidden=\"true\"\r\n ></div>\r\n `\r\n : nothing}\r\n <aside\r\n class=\"panel ${this.open ? 'panel--open' : ''}\"\r\n part=\"panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label=${this.label || nothing}\r\n tabindex=\"-1\"\r\n >\r\n <header\r\n class=\"header ${this.hasHeader || this.showClose\r\n ? ''\r\n : 'header--empty'}\"\r\n part=\"header\"\r\n >\r\n <slot\r\n name=\"header\"\r\n @slotchange=${this.handleHeaderSlotChange}\r\n ></slot>\r\n ${this.showClose\r\n ? html`\r\n <button\r\n class=\"close-button\"\r\n part=\"close-button\"\r\n type=\"button\"\r\n aria-label=\"Close drawer\"\r\n @click=${this.handleCloseClick}\r\n >\r\n <bp-icon name=\"close\" size=\"sm\"></bp-icon>\r\n </button>\r\n `\r\n : nothing}\r\n </header>\r\n <div class=\"body\" part=\"body\">\r\n <slot></slot>\r\n </div>\r\n ${this.hasFooter\r\n ? html`\r\n <footer class=\"footer\" part=\"footer\">\r\n <slot\r\n name=\"footer\"\r\n @slotchange=${this.handleFooterSlotChange}\r\n ></slot>\r\n </footer>\r\n `\r\n : html`<slot\r\n name=\"footer\"\r\n @slotchange=${this.handleFooterSlotChange}\r\n ></slot>`}\r\n </aside>\r\n </div>\r\n `;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n 'bp-drawer': BpDrawer;\r\n }\r\n}\r\n"],"names":["drawerStyles","css","BpDrawer","LitElement","event","slot","reason","changedProperties","isHorizontal","html","nothing","__decorateClass","property","value","booleanConverter","customElement"],"mappings":";;;AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}
|
|
1
|
+
{"version":3,"file":"drawer.js","sources":["../../source/components/drawer/drawer.style.ts","../../source/components/drawer/drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const drawerStyles = css`\n /* Base styles */\n :host {\n display: contents;\n }\n\n .drawer {\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-base);\n color: var(--bp-color-text);\n }\n\n /* Overlay mode */\n .drawer--overlay {\n position: fixed;\n inset: 0;\n z-index: var(--bp-z-modal);\n pointer-events: none;\n }\n\n .drawer--overlay.drawer--open {\n pointer-events: auto;\n }\n\n /* Backdrop */\n .backdrop {\n position: absolute;\n inset: 0;\n background-color: oklch(from var(--bp-color-text) l c h / 0.5);\n opacity: 0;\n transition: opacity var(--bp-transition-base) ease-out;\n }\n\n .backdrop--visible {\n opacity: 1;\n }\n\n /* Panel base */\n .panel {\n position: absolute;\n display: flex;\n flex-direction: column;\n background-color: var(--bp-color-surface);\n box-shadow: var(--bp-shadow-xl);\n transition: transform var(--bp-transition-base) ease-out;\n overflow: hidden;\n }\n\n .drawer--overlay .panel:focus {\n outline: none;\n }\n\n /* Horizontal drawers (left/right) */\n .drawer--horizontal .panel {\n top: 0;\n bottom: 0;\n height: 100%;\n }\n\n .drawer--left .panel {\n left: 0;\n transform: translateX(-100%);\n }\n\n .drawer--left .panel--open {\n transform: translateX(0);\n }\n\n .drawer--right .panel {\n right: 0;\n transform: translateX(100%);\n }\n\n .drawer--right .panel--open {\n transform: translateX(0);\n }\n\n /* Vertical drawers (top/bottom) */\n .drawer--vertical .panel {\n left: 0;\n right: 0;\n width: 100%;\n }\n\n .drawer--top .panel {\n top: 0;\n transform: translateY(-100%);\n }\n\n .drawer--top .panel--open {\n transform: translateY(0);\n }\n\n .drawer--bottom .panel {\n bottom: 0;\n transform: translateY(100%);\n }\n\n .drawer--bottom .panel--open {\n transform: translateY(0);\n }\n\n /* Sizes - horizontal (width) */\n .drawer--horizontal.drawer--sm .panel {\n width: calc(var(--bp-spacing-24) * 3);\n }\n\n .drawer--horizontal.drawer--md .panel {\n width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n }\n\n .drawer--horizontal.drawer--lg .panel {\n width: var(--bp-breakpoint-sm);\n }\n\n .drawer--horizontal.drawer--full .panel {\n width: 100%;\n }\n\n /* Sizes - vertical (height) */\n .drawer--vertical.drawer--sm .panel {\n height: calc(var(--bp-spacing-24) * 2);\n }\n\n .drawer--vertical.drawer--md .panel {\n height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n }\n\n .drawer--vertical.drawer--lg .panel {\n height: calc(var(--bp-spacing-24) * 5);\n }\n\n .drawer--vertical.drawer--full .panel {\n height: 100%;\n }\n\n /* Header */\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--bp-spacing-4);\n padding: var(--bp-spacing-4) var(--bp-spacing-5);\n border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n flex-shrink: 0;\n }\n\n .header--empty {\n display: none;\n }\n\n .header ::slotted(*) {\n margin: 0;\n font-size: var(--bp-font-size-lg);\n font-weight: var(--bp-font-weight-semibold);\n }\n\n /* Body */\n .body {\n flex: 1;\n overflow-y: auto;\n padding: var(--bp-spacing-5);\n }\n\n /* Footer */\n .footer {\n display: flex;\n align-items: center;\n gap: var(--bp-spacing-4);\n padding: var(--bp-spacing-4) var(--bp-spacing-5);\n border-top: var(--bp-border-width) solid var(--bp-color-border);\n flex-shrink: 0;\n }\n\n /* Close button */\n .close-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n padding: 0;\n margin-left: auto;\n background: transparent;\n border: none;\n border-radius: var(--bp-border-radius-sm);\n color: var(--bp-color-text-muted);\n cursor: pointer;\n transition:\n background-color var(--bp-transition-fast),\n color var(--bp-transition-fast),\n transform var(--bp-transition-fast);\n }\n\n .close-button:hover {\n background-color: var(--bp-color-surface-subdued);\n color: var(--bp-color-text);\n }\n\n .close-button:active {\n background-color: var(--bp-color-surface-pressed);\n transform: translateY(1px);\n }\n\n .close-button:focus {\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n outline-offset: var(--bp-focus-offset);\n }\n\n .close-button:focus:not(:focus-visible) {\n outline: none;\n }\n\n .close-button:focus-visible {\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n outline-offset: var(--bp-focus-offset);\n }\n\n /* Inline mode - static sidebar */\n .drawer--inline {\n display: block;\n }\n\n .drawer--inline .panel {\n position: relative;\n transform: none;\n box-shadow: none;\n border: var(--bp-border-width) solid var(--bp-color-border);\n border-radius: var(--bp-border-radius-md);\n }\n\n .drawer--inline.drawer--horizontal {\n height: 100%;\n }\n\n .drawer--inline.drawer--vertical {\n width: 100%;\n }\n\n /* Inline sizes - horizontal */\n .drawer--inline.drawer--horizontal.drawer--small {\n width: calc(var(--bp-spacing-24) * 3);\n }\n\n .drawer--inline.drawer--horizontal.drawer--medium {\n width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n }\n\n .drawer--inline.drawer--horizontal.drawer--large {\n width: var(--bp-breakpoint-sm);\n }\n\n .drawer--inline.drawer--horizontal.drawer--full {\n width: 100%;\n }\n\n /* Inline sizes - vertical */\n .drawer--inline.drawer--vertical.drawer--small .panel {\n height: calc(var(--bp-spacing-24) * 2);\n }\n\n .drawer--inline.drawer--vertical.drawer--medium .panel {\n height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n }\n\n .drawer--inline.drawer--vertical.drawer--large .panel {\n height: calc(var(--bp-spacing-24) * 5);\n }\n\n .drawer--inline.drawer--vertical.drawer--full .panel {\n height: auto;\n }\n\n /* Border positioning for inline drawers */\n .drawer--inline.drawer--left .panel {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .drawer--inline.drawer--right .panel {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n .drawer--inline.drawer--top .panel {\n border-top: none;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n .drawer--inline.drawer--bottom .panel {\n border-bottom: none;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n /* Reduced motion */\n @media (prefers-reduced-motion: reduce) {\n .panel {\n transition: none;\n }\n\n .backdrop {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { drawerStyles } from './drawer.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport '../icon/icon.js';\n\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\n\n/**\n * A slide-in panel component that can appear from any edge of the viewport.\n *\n * @fires bp-open - Fired when the drawer opens\n * @fires bp-close - Fired when the drawer closes (includes reason: 'escape' | 'backdrop' | 'close-button' | 'api')\n * @fires bp-after-open - Fired after open animation completes\n * @fires bp-after-close - Fired after close animation completes\n *\n * @slot - Default slot for drawer content\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (when not inline)\n * @csspart panel - The drawer panel\n * @csspart header - The header section\n * @csspart body - The body/content section\n * @csspart footer - The footer section\n * @csspart close-button - The close button\n */\n@customElement('bp-drawer')\nexport class BpDrawer extends LitElement {\n /** Whether the drawer is open */\n @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n /** Which edge the drawer slides in from */\n @property({\n type: String,\n reflect: true,\n converter: {\n fromAttribute: (value: string | null) => {\n const valid = ['left', 'right', 'top', 'bottom'];\n return value && valid.includes(value)\n ? (value as DrawerPlacement)\n : 'left';\n },\n },\n })\n declare placement: DrawerPlacement;\n\n /** Size of the drawer (width for left/right, height for top/bottom) */\n @property({\n type: String,\n reflect: true,\n converter: {\n fromAttribute: (value: string | null) => {\n const valid = ['sm', 'md', 'lg', 'full'];\n return value && valid.includes(value) ? (value as DrawerSize) : 'md';\n },\n },\n })\n declare size: DrawerSize;\n\n /** Whether to show the close button */\n @property({\n converter: booleanConverter,\n attribute: 'show-close',\n reflect: true,\n })\n declare showClose: boolean;\n\n /** Whether clicking the backdrop closes the drawer */\n @property({\n converter: booleanConverter,\n attribute: 'close-on-backdrop',\n reflect: true,\n })\n declare closeOnBackdrop: boolean;\n\n /** Whether pressing Escape closes the drawer */\n @property({\n converter: booleanConverter,\n attribute: 'close-on-escape',\n reflect: true,\n })\n declare closeOnEscape: boolean;\n\n /** Whether to show the backdrop overlay */\n @property({\n converter: booleanConverter,\n attribute: 'show-backdrop',\n reflect: true,\n })\n declare showBackdrop: boolean;\n\n /** Accessible label for the drawer */\n @property({ type: String }) declare label: string;\n\n /**\n * Whether the drawer is rendered inline (always visible, part of document flow).\n * When true, the drawer acts as a static sidebar without overlay behavior.\n */\n @property({ type: Boolean, reflect: true }) declare inline: boolean;\n\n /** Whether the drawer has a header slot content */\n @property({ type: Boolean, attribute: false }) private hasHeader = false;\n\n /** Whether the drawer has a footer slot content */\n @property({ type: Boolean, attribute: false }) private hasFooter = false;\n\n private previouslyFocusedElement: HTMLElement | null = null;\n\n static styles = [drawerStyles];\n\n constructor() {\n super();\n this.open = false;\n this.placement = 'left';\n this.size = 'md';\n this.showClose = true;\n this.closeOnBackdrop = true;\n this.closeOnEscape = true;\n this.showBackdrop = true;\n this.label = '';\n this.inline = false;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this.handleKeyDown);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.handleKeyDown);\n }\n\n /**\n * Open the drawer.\n * Sets open property to true and manages focus/scroll behavior.\n *\n * @fires bp-open - Emitted when the drawer opens\n * @fires bp-after-open - Emitted after open animation completes\n */\n show(): void {\n if (this.open) return;\n this.open = true;\n }\n\n /**\n * Close the drawer.\n * Sets open property to false if bp-close event is not prevented.\n *\n * @param reason - The reason the drawer was closed\n * @fires bp-close - Emitted when the drawer closes (cancelable)\n * @fires bp-after-close - Emitted after close animation completes\n */\n hide(reason: 'escape' | 'backdrop' | 'close-button' | 'api' = 'api'): void {\n if (!this.open) return;\n\n const event = new CustomEvent('bp-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n\n this.dispatchEvent(event);\n\n if (!event.defaultPrevented) {\n this.open = false;\n }\n }\n\n /**\n * Toggle the drawer open/closed state.\n * Calls hide() if open, show() if closed.\n */\n toggle(): void {\n if (this.open) {\n this.hide('api');\n } else {\n this.show();\n }\n }\n\n protected updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has('open')) {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n }\n }\n\n private handleOpen(): void {\n if (!this.inline) {\n // Store currently focused element\n this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n // Prevent body scroll\n document.body.style.overflow = 'hidden';\n }\n\n this.dispatchEvent(\n new CustomEvent('bp-open', {\n bubbles: true,\n composed: true,\n })\n );\n\n // Focus the drawer panel for accessibility\n this.updateComplete.then(() => {\n const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;\n panel?.focus();\n\n this.dispatchEvent(\n new CustomEvent('bp-after-open', {\n bubbles: true,\n composed: true,\n })\n );\n });\n }\n\n private handleClose(): void {\n if (!this.inline) {\n // Restore body scroll\n document.body.style.overflow = '';\n\n // Restore focus\n if (this.previouslyFocusedElement) {\n this.previouslyFocusedElement.focus();\n this.previouslyFocusedElement = null;\n }\n }\n\n this.updateComplete.then(() => {\n this.dispatchEvent(\n new CustomEvent('bp-after-close', {\n bubbles: true,\n composed: true,\n })\n );\n });\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (\n event.key === 'Escape' &&\n this.closeOnEscape &&\n this.open &&\n !this.inline\n ) {\n event.preventDefault();\n this.hide('escape');\n }\n };\n\n /**\n * Handles click events on the backdrop overlay.\n * Closes the drawer if closeOnBackdrop is true.\n */\n private handleBackdropClick = (): void => {\n if (this.closeOnBackdrop) {\n this.hide('backdrop');\n }\n };\n\n /**\n * Handles click events on the close button.\n * Closes the drawer with reason 'close-button'.\n */\n private handleCloseClick = (): void => {\n this.hide('close-button');\n };\n\n /**\n * Handles slot change events for the header slot.\n * Updates hasHeader state to control header visibility.\n *\n * @param event - The slotchange event\n */\n private handleHeaderSlotChange = (event: Event): void => {\n const slot = event.target as HTMLElement & {\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\n };\n this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\n };\n\n /**\n * Handles slot change events for the footer slot.\n * Updates hasFooter state to control footer visibility.\n *\n * @param event - The slotchange event\n */\n private handleFooterSlotChange = (event: Event): void => {\n const slot = event.target as HTMLElement & {\n assignedNodes: (options?: { flatten?: boolean }) => Node[];\n };\n this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n };\n\n render() {\n const isHorizontal =\n this.placement === 'left' || this.placement === 'right';\n\n // Inline mode: always visible, no backdrop, no overlay behavior\n if (this.inline) {\n return html`\n <aside\n class=\"drawer drawer--inline drawer--${this.placement} drawer--${this\n .size} ${isHorizontal ? 'drawer--horizontal' : 'drawer--vertical'}\"\n part=\"drawer\"\n role=\"complementary\"\n aria-label=${this.label || nothing}\n >\n <div class=\"panel\" part=\"panel\">\n ${this.hasHeader || this.showClose\n ? html`\n <header class=\"header\" part=\"header\">\n <slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>\n </header>\n `\n : html`<slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>`}\n <div class=\"body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.hasFooter\n ? html`\n <footer class=\"footer\" part=\"footer\">\n <slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>\n </footer>\n `\n : html`<slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>`}\n </div>\n </aside>\n `;\n }\n\n // Overlay mode: slide-in panel with backdrop\n return html`\n <div\n class=\"drawer drawer--overlay drawer--${this.placement} drawer--${this\n .size} ${isHorizontal\n ? 'drawer--horizontal'\n : 'drawer--vertical'} ${this.open ? 'drawer--open' : ''}\"\n part=\"drawer\"\n >\n ${this.showBackdrop\n ? html`\n <div\n class=\"backdrop ${this.open ? 'backdrop--visible' : ''}\"\n part=\"backdrop\"\n @click=${this.handleBackdropClick}\n aria-hidden=\"true\"\n ></div>\n `\n : nothing}\n <aside\n class=\"panel ${this.open ? 'panel--open' : ''}\"\n part=\"panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=${this.label || nothing}\n tabindex=\"-1\"\n >\n <header\n class=\"header ${this.hasHeader || this.showClose\n ? ''\n : 'header--empty'}\"\n part=\"header\"\n >\n <slot\n name=\"header\"\n @slotchange=${this.handleHeaderSlotChange}\n ></slot>\n ${this.showClose\n ? html`\n <button\n class=\"close-button\"\n part=\"close-button\"\n type=\"button\"\n aria-label=\"Close drawer\"\n @click=${this.handleCloseClick}\n >\n <bp-icon name=\"close\" size=\"sm\"></bp-icon>\n </button>\n `\n : nothing}\n </header>\n <div class=\"body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.hasFooter\n ? html`\n <footer class=\"footer\" part=\"footer\">\n <slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>\n </footer>\n `\n : html`<slot\n name=\"footer\"\n @slotchange=${this.handleFooterSlotChange}\n ></slot>`}\n </aside>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-drawer': BpDrawer;\n }\n}\n"],"names":["drawerStyles","css","BpDrawer","LitElement","event","slot","reason","changedProperties","isHorizontal","html","nothing","__decorateClass","property","value","booleanConverter","customElement"],"mappings":";;;AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sources":["../../source/components/dropdown/dropdown.style.ts","../../source/components/dropdown/dropdown.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const dropdownStyles = css`\r\n /* Base styles */\r\n :host {\r\n display: inline-block;\r\n position: relative;\r\n }\r\n\r\n .dropdown {\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n /* Trigger */\r\n .dropdown__trigger {\r\n display: inline-flex;\r\n align-items: center;\r\n cursor: pointer;\r\n outline: none;\r\n user-select: none;\r\n }\r\n\r\n .dropdown__trigger:focus-visible {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n border-radius: var(--bp-border-radius-sm);\r\n }\r\n\r\n /* Panel */\r\n .dropdown__panel {\r\n position: absolute;\r\n z-index: 1000; /* Overlay layer - above page content, below modals */\r\n min-width: 200px;\r\n background-color: var(--bp-color-surface-elevated);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-lg);\r\n box-shadow: var(--bp-shadow-lg);\r\n padding: var(--bp-spacing-sm);\r\n opacity: 0;\r\n will-change: opacity, transform;\r\n transition:\r\n opacity var(--bp-transition-fast) var(--bp-ease-out),\r\n transform var(--bp-transition-fast) var(--bp-ease-out);\r\n contain: layout style;\r\n }\r\n\r\n /* Placement: Bottom variants */\r\n .dropdown__panel--bottom-start {\r\n top: 100%;\r\n left: 0;\r\n margin-top: var(--dropdown-distance, 4px);\r\n transform: translateY(-8px);\r\n }\r\n\r\n .dropdown__panel--bottom-start.dropdown__panel--open {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .dropdown__panel--bottom {\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-8px);\r\n margin-top: var(--dropdown-distance, 4px);\r\n }\r\n\r\n .dropdown__panel--bottom.dropdown__panel--open {\r\n opacity: 1;\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n .dropdown__panel--bottom-end {\r\n top: 100%;\r\n right: 0;\r\n margin-top: var(--dropdown-distance, 4px);\r\n transform: translateY(-8px);\r\n }\r\n\r\n .dropdown__panel--bottom-end.dropdown__panel--open {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n /* Placement: Top variants */\r\n .dropdown__panel--top-start {\r\n bottom: 100%;\r\n left: 0;\r\n margin-bottom: var(--dropdown-distance, 4px);\r\n transform: translateY(8px);\r\n }\r\n\r\n .dropdown__panel--top-start.dropdown__panel--open {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .dropdown__panel--top {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(8px);\r\n margin-bottom: var(--dropdown-distance, 4px);\r\n }\r\n\r\n .dropdown__panel--top.dropdown__panel--open {\r\n opacity: 1;\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n .dropdown__panel--top-end {\r\n bottom: 100%;\r\n right: 0;\r\n margin-bottom: var(--dropdown-distance, 4px);\r\n transform: translateY(8px);\r\n }\r\n\r\n .dropdown__panel--top-end.dropdown__panel--open {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n /* Placement: Side variants */\r\n .dropdown__panel--left {\r\n right: 100%;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n margin-right: var(--dropdown-distance, 4px);\r\n }\r\n\r\n .dropdown__panel--left.dropdown__panel--open {\r\n opacity: 1;\r\n }\r\n\r\n .dropdown__panel--right {\r\n left: 100%;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n margin-left: var(--dropdown-distance, 4px);\r\n }\r\n\r\n .dropdown__panel--right.dropdown__panel--open {\r\n opacity: 1;\r\n }\r\n\r\n /* Arrow */\r\n .dropdown__arrow {\r\n position: absolute;\r\n width: 12px;\r\n height: 12px;\r\n background-color: var(--bp-color-surface-elevated);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n transform: rotate(45deg);\r\n border-bottom: none;\r\n border-right: none;\r\n }\r\n\r\n /* Arrow positioning: Bottom variants */\r\n .dropdown__panel--bottom .dropdown__arrow {\r\n top: -7px;\r\n left: 50%;\r\n margin-left: -6px;\r\n }\r\n\r\n .dropdown__panel--bottom-start .dropdown__arrow {\r\n top: -7px;\r\n left: 16px;\r\n }\r\n\r\n .dropdown__panel--bottom-end .dropdown__arrow {\r\n top: -7px;\r\n right: 16px;\r\n }\r\n\r\n /* Arrow positioning: Top variants */\r\n .dropdown__panel--top .dropdown__arrow {\r\n bottom: -7px;\r\n left: 50%;\r\n margin-left: -6px;\r\n transform: rotate(225deg);\r\n }\r\n\r\n .dropdown__panel--top-start .dropdown__arrow {\r\n bottom: -7px;\r\n left: 16px;\r\n transform: rotate(225deg);\r\n }\r\n\r\n .dropdown__panel--top-end .dropdown__arrow {\r\n bottom: -7px;\r\n right: 16px;\r\n transform: rotate(225deg);\r\n }\r\n\r\n /* Arrow positioning: Side variants */\r\n .dropdown__panel--left .dropdown__arrow {\r\n right: -7px;\r\n top: 50%;\r\n margin-top: -6px;\r\n transform: rotate(135deg);\r\n }\r\n\r\n .dropdown__panel--right .dropdown__arrow {\r\n left: -7px;\r\n top: 50%;\r\n margin-top: -6px;\r\n transform: rotate(-45deg);\r\n }\r\n\r\n /* Disabled state */\r\n .dropdown--disabled .dropdown__trigger {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n filter: grayscale(50%);\r\n pointer-events: none;\r\n }\r\n`;\r\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { dropdownStyles } from './dropdown.style.js';\n\n/**\n * A generic dropdown component that displays content in a floating panel.\n *\n * @fires bp-show - Dispatched when the dropdown opens\n * @fires bp-hide - Dispatched when the dropdown closes\n * @fires bp-toggle - Dispatched when the dropdown toggles\n *\n * @slot - Default slot for the dropdown trigger element\n * @slot content - Content to display in the dropdown panel\n *\n * @csspart trigger - The trigger button container\n * @csspart panel - The dropdown panel container\n */\n@customElement('bp-dropdown')\nexport class BpDropdown extends LitElement {\n /** Whether the dropdown is open */\n @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n /** Placement of the dropdown panel relative to the trigger */\n @property({ type: String }) declare placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'right';\n\n /** Whether the dropdown should close when clicking outside */\n @property({ type: Boolean }) declare closeOnClickOutside: boolean;\n\n /** Whether the dropdown should close when pressing Escape */\n @property({ type: Boolean }) declare closeOnEscape: boolean;\n\n /** Whether the dropdown should close when an item inside is clicked */\n @property({ type: Boolean }) declare closeOnSelect: boolean;\n\n /** Whether the dropdown is disabled */\n @property({ type: Boolean }) declare disabled: boolean;\n\n /** Distance in pixels between the trigger and the panel */\n @property({ type: Number }) declare distance: number;\n\n /** Whether to show an arrow pointing to the trigger */\n @property({ type: Boolean }) declare arrow: boolean;\n\n /** ARIA role for the dropdown panel */\n @property({ type: String }) declare panelRole: 'menu' | 'dialog' | 'listbox';\n\n @query('.dropdown__trigger') private triggerElement!: HTMLElement;\n\n private clickOutsideHandler = this.handleClickOutside.bind(this);\n private keydownHandler = this.handleKeydown.bind(this);\n\n static styles = [dropdownStyles];\n\n constructor() {\n super();\n this.open = false;\n this.placement = 'bottom-start';\n this.closeOnClickOutside = true;\n this.closeOnEscape = true;\n this.closeOnSelect = true;\n this.disabled = false;\n this.distance = 4;\n this.arrow = false;\n this.panelRole = 'menu';\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.clickOutsideHandler, {\n passive: true,\n });\n document.addEventListener('keydown', this.keydownHandler);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.clickOutsideHandler, {\n passive: true,\n } as EventListenerOptions);\n document.removeEventListener('keydown', this.keydownHandler);\n }\n\n updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('open') && this.open) {\n // Trigger width available via this.triggerElement.offsetWidth if needed\n }\n }\n\n /** Show the dropdown */\n show() {\n if (this.disabled || this.open) return;\n\n this.open = true;\n this.dispatchEvent(\n new CustomEvent('bp-show', { bubbles: true, composed: true })\n );\n this.dispatchEvent(\n new CustomEvent('bp-toggle', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /** Hide the dropdown */\n hide() {\n if (!this.open) return;\n\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('bp-hide', { bubbles: true, composed: true })\n );\n this.dispatchEvent(\n new CustomEvent('bp-toggle', {\n detail: { open: false },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /** Toggle the dropdown open/closed */\n toggle() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n /**\n * Toggles dropdown when trigger is clicked.\n * Stops propagation to prevent immediate outside click detection.\n */\n private handleTriggerClick(event: MouseEvent) {\n event.stopPropagation();\n if (!this.disabled) {\n this.toggle();\n }\n }\n\n /**\n * Handles keyboard interaction on the trigger.\n * Enter/Space toggle, ArrowDown opens when closed.\n */\n private handleTriggerKeydown(event: KeyboardEvent) {\n if (this.disabled) return;\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.toggle();\n } else if (event.key === 'ArrowDown' && !this.open) {\n event.preventDefault();\n this.show();\n }\n }\n\n /**\n * Closes the dropdown when user clicks outside the component.\n * Only runs if closeOnClickOutside is true and dropdown is open.\n */\n private handleClickOutside(event: MouseEvent) {\n if (!this.closeOnClickOutside || !this.open) return;\n\n const path = event.composedPath();\n if (!path.includes(this)) {\n this.hide();\n }\n }\n\n /**\n * Closes dropdown on Escape key and returns focus to trigger.\n * Only runs if closeOnEscape is true and dropdown is open.\n */\n private handleKeydown(event: KeyboardEvent) {\n if (!this.closeOnEscape || !this.open) return;\n\n if (event.key === 'Escape') {\n event.preventDefault();\n this.hide();\n this.triggerElement?.focus();\n }\n }\n\n /**\n * Handles clicks inside the panel to auto-close on item selection.\n * Detects menu items or elements with data-dropdown-close attribute.\n */\n private handlePanelClick(event: MouseEvent) {\n if (this.closeOnSelect) {\n // Check if clicked element or its parent is a menu item or similar\n const target = event.target as HTMLElement;\n const isSelectableItem =\n target.closest('bp-menu-item') ||\n target.closest('[data-dropdown-close]') ||\n target.hasAttribute('data-dropdown-close');\n\n if (isSelectableItem) {\n this.hide();\n }\n }\n }\n\n render() {\n return html`\n <div\n class=\"dropdown ${this.open ? 'dropdown--open' : ''} ${this.disabled\n ? 'dropdown--disabled'\n : ''}\"\n >\n <div\n class=\"dropdown__trigger\"\n part=\"trigger\"\n tabindex=${this.disabled ? -1 : 0}\n role=\"button\"\n aria-haspopup=\"true\"\n aria-expanded=${this.open}\n aria-disabled=${this.disabled}\n @click=${this.handleTriggerClick}\n @keydown=${this.handleTriggerKeydown}\n >\n <slot></slot>\n </div>\n ${this.open\n ? html`\n <div\n class=\"dropdown__panel dropdown__panel--${this.placement} ${this\n .open\n ? 'dropdown__panel--open'\n : ''}\"\n part=\"panel\"\n role=${this.panelRole}\n style=\"--dropdown-distance: ${this.distance}px;\"\n @click=${this.handlePanelClick}\n >\n ${this.arrow\n ? html`<div class=\"dropdown__arrow\"></div>`\n : nothing}\n <slot name=\"content\"></slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-dropdown': BpDropdown;\n }\n}\n"],"names":["dropdownStyles","css","BpDropdown","LitElement","changedProperties","event","target","html","nothing","__decorateClass","property","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown.js","sources":["../../source/components/dropdown/dropdown.style.ts","../../source/components/dropdown/dropdown.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const dropdownStyles = css`\n /* Base styles */\n :host {\n display: inline-block;\n position: relative;\n }\n\n .dropdown {\n position: relative;\n display: inline-block;\n }\n\n /* Trigger */\n .dropdown__trigger {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n outline: none;\n user-select: none;\n }\n\n .dropdown__trigger:focus-visible {\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n outline-offset: var(--bp-focus-offset);\n border-radius: var(--bp-border-radius-sm);\n }\n\n /* Panel */\n .dropdown__panel {\n position: absolute;\n z-index: 1000; /* Overlay layer - above page content, below modals */\n min-width: 200px;\n background-color: var(--bp-color-surface-elevated);\n border: var(--bp-border-width) solid var(--bp-color-border);\n border-radius: var(--bp-border-radius-lg);\n box-shadow: var(--bp-shadow-lg);\n padding: var(--bp-spacing-sm);\n opacity: 0;\n will-change: opacity, transform;\n transition:\n opacity var(--bp-transition-fast) var(--bp-ease-out),\n transform var(--bp-transition-fast) var(--bp-ease-out);\n contain: layout style;\n }\n\n /* Placement: Bottom variants */\n .dropdown__panel--bottom-start {\n top: 100%;\n left: 0;\n margin-top: var(--dropdown-distance, 4px);\n transform: translateY(-8px);\n }\n\n .dropdown__panel--bottom-start.dropdown__panel--open {\n opacity: 1;\n transform: translateY(0);\n }\n\n .dropdown__panel--bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(-8px);\n margin-top: var(--dropdown-distance, 4px);\n }\n\n .dropdown__panel--bottom.dropdown__panel--open {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n\n .dropdown__panel--bottom-end {\n top: 100%;\n right: 0;\n margin-top: var(--dropdown-distance, 4px);\n transform: translateY(-8px);\n }\n\n .dropdown__panel--bottom-end.dropdown__panel--open {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* Placement: Top variants */\n .dropdown__panel--top-start {\n bottom: 100%;\n left: 0;\n margin-bottom: var(--dropdown-distance, 4px);\n transform: translateY(8px);\n }\n\n .dropdown__panel--top-start.dropdown__panel--open {\n opacity: 1;\n transform: translateY(0);\n }\n\n .dropdown__panel--top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(8px);\n margin-bottom: var(--dropdown-distance, 4px);\n }\n\n .dropdown__panel--top.dropdown__panel--open {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n\n .dropdown__panel--top-end {\n bottom: 100%;\n right: 0;\n margin-bottom: var(--dropdown-distance, 4px);\n transform: translateY(8px);\n }\n\n .dropdown__panel--top-end.dropdown__panel--open {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* Placement: Side variants */\n .dropdown__panel--left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--dropdown-distance, 4px);\n }\n\n .dropdown__panel--left.dropdown__panel--open {\n opacity: 1;\n }\n\n .dropdown__panel--right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: var(--dropdown-distance, 4px);\n }\n\n .dropdown__panel--right.dropdown__panel--open {\n opacity: 1;\n }\n\n /* Arrow */\n .dropdown__arrow {\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: var(--bp-color-surface-elevated);\n border: var(--bp-border-width) solid var(--bp-color-border);\n transform: rotate(45deg);\n border-bottom: none;\n border-right: none;\n }\n\n /* Arrow positioning: Bottom variants */\n .dropdown__panel--bottom .dropdown__arrow {\n top: -7px;\n left: 50%;\n margin-left: -6px;\n }\n\n .dropdown__panel--bottom-start .dropdown__arrow {\n top: -7px;\n left: 16px;\n }\n\n .dropdown__panel--bottom-end .dropdown__arrow {\n top: -7px;\n right: 16px;\n }\n\n /* Arrow positioning: Top variants */\n .dropdown__panel--top .dropdown__arrow {\n bottom: -7px;\n left: 50%;\n margin-left: -6px;\n transform: rotate(225deg);\n }\n\n .dropdown__panel--top-start .dropdown__arrow {\n bottom: -7px;\n left: 16px;\n transform: rotate(225deg);\n }\n\n .dropdown__panel--top-end .dropdown__arrow {\n bottom: -7px;\n right: 16px;\n transform: rotate(225deg);\n }\n\n /* Arrow positioning: Side variants */\n .dropdown__panel--left .dropdown__arrow {\n right: -7px;\n top: 50%;\n margin-top: -6px;\n transform: rotate(135deg);\n }\n\n .dropdown__panel--right .dropdown__arrow {\n left: -7px;\n top: 50%;\n margin-top: -6px;\n transform: rotate(-45deg);\n }\n\n /* Disabled state */\n .dropdown--disabled .dropdown__trigger {\n cursor: not-allowed;\n opacity: 0.6;\n filter: grayscale(50%);\n pointer-events: none;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { dropdownStyles } from './dropdown.style.js';\n\n/**\n * A generic dropdown component that displays content in a floating panel.\n *\n * @fires bp-show - Dispatched when the dropdown opens\n * @fires bp-hide - Dispatched when the dropdown closes\n * @fires bp-toggle - Dispatched when the dropdown toggles\n *\n * @slot - Default slot for the dropdown trigger element\n * @slot content - Content to display in the dropdown panel\n *\n * @csspart trigger - The trigger button container\n * @csspart panel - The dropdown panel container\n */\n@customElement('bp-dropdown')\nexport class BpDropdown extends LitElement {\n /** Whether the dropdown is open */\n @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n /** Placement of the dropdown panel relative to the trigger */\n @property({ type: String }) declare placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'right';\n\n /** Whether the dropdown should close when clicking outside */\n @property({ type: Boolean }) declare closeOnClickOutside: boolean;\n\n /** Whether the dropdown should close when pressing Escape */\n @property({ type: Boolean }) declare closeOnEscape: boolean;\n\n /** Whether the dropdown should close when an item inside is clicked */\n @property({ type: Boolean }) declare closeOnSelect: boolean;\n\n /** Whether the dropdown is disabled */\n @property({ type: Boolean }) declare disabled: boolean;\n\n /** Distance in pixels between the trigger and the panel */\n @property({ type: Number }) declare distance: number;\n\n /** Whether to show an arrow pointing to the trigger */\n @property({ type: Boolean }) declare arrow: boolean;\n\n /** ARIA role for the dropdown panel */\n @property({ type: String }) declare panelRole: 'menu' | 'dialog' | 'listbox';\n\n @query('.dropdown__trigger') private triggerElement!: HTMLElement;\n\n private clickOutsideHandler = this.handleClickOutside.bind(this);\n private keydownHandler = this.handleKeydown.bind(this);\n\n static styles = [dropdownStyles];\n\n constructor() {\n super();\n this.open = false;\n this.placement = 'bottom-start';\n this.closeOnClickOutside = true;\n this.closeOnEscape = true;\n this.closeOnSelect = true;\n this.disabled = false;\n this.distance = 4;\n this.arrow = false;\n this.panelRole = 'menu';\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.clickOutsideHandler, {\n passive: true,\n });\n document.addEventListener('keydown', this.keydownHandler);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.clickOutsideHandler, {\n passive: true,\n } as EventListenerOptions);\n document.removeEventListener('keydown', this.keydownHandler);\n }\n\n updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('open') && this.open) {\n // Trigger width available via this.triggerElement.offsetWidth if needed\n }\n }\n\n /** Show the dropdown */\n show() {\n if (this.disabled || this.open) return;\n\n this.open = true;\n this.dispatchEvent(\n new CustomEvent('bp-show', { bubbles: true, composed: true })\n );\n this.dispatchEvent(\n new CustomEvent('bp-toggle', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /** Hide the dropdown */\n hide() {\n if (!this.open) return;\n\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('bp-hide', { bubbles: true, composed: true })\n );\n this.dispatchEvent(\n new CustomEvent('bp-toggle', {\n detail: { open: false },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /** Toggle the dropdown open/closed */\n toggle() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n /**\n * Toggles dropdown when trigger is clicked.\n * Stops propagation to prevent immediate outside click detection.\n */\n private handleTriggerClick(event: MouseEvent) {\n event.stopPropagation();\n if (!this.disabled) {\n this.toggle();\n }\n }\n\n /**\n * Handles keyboard interaction on the trigger.\n * Enter/Space toggle, ArrowDown opens when closed.\n */\n private handleTriggerKeydown(event: KeyboardEvent) {\n if (this.disabled) return;\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.toggle();\n } else if (event.key === 'ArrowDown' && !this.open) {\n event.preventDefault();\n this.show();\n }\n }\n\n /**\n * Closes the dropdown when user clicks outside the component.\n * Only runs if closeOnClickOutside is true and dropdown is open.\n */\n private handleClickOutside(event: MouseEvent) {\n if (!this.closeOnClickOutside || !this.open) return;\n\n const path = event.composedPath();\n if (!path.includes(this)) {\n this.hide();\n }\n }\n\n /**\n * Closes dropdown on Escape key and returns focus to trigger.\n * Only runs if closeOnEscape is true and dropdown is open.\n */\n private handleKeydown(event: KeyboardEvent) {\n if (!this.closeOnEscape || !this.open) return;\n\n if (event.key === 'Escape') {\n event.preventDefault();\n this.hide();\n this.triggerElement?.focus();\n }\n }\n\n /**\n * Handles clicks inside the panel to auto-close on item selection.\n * Detects menu items or elements with data-dropdown-close attribute.\n */\n private handlePanelClick(event: MouseEvent) {\n if (this.closeOnSelect) {\n // Check if clicked element or its parent is a menu item or similar\n const target = event.target as HTMLElement;\n const isSelectableItem =\n target.closest('bp-menu-item') ||\n target.closest('[data-dropdown-close]') ||\n target.hasAttribute('data-dropdown-close');\n\n if (isSelectableItem) {\n this.hide();\n }\n }\n }\n\n render() {\n return html`\n <div\n class=\"dropdown ${this.open ? 'dropdown--open' : ''} ${this.disabled\n ? 'dropdown--disabled'\n : ''}\"\n >\n <div\n class=\"dropdown__trigger\"\n part=\"trigger\"\n tabindex=${this.disabled ? -1 : 0}\n role=\"button\"\n aria-haspopup=\"true\"\n aria-expanded=${this.open}\n aria-disabled=${this.disabled}\n @click=${this.handleTriggerClick}\n @keydown=${this.handleTriggerKeydown}\n >\n <slot></slot>\n </div>\n ${this.open\n ? html`\n <div\n class=\"dropdown__panel dropdown__panel--${this.placement} ${this\n .open\n ? 'dropdown__panel--open'\n : ''}\"\n part=\"panel\"\n role=${this.panelRole}\n style=\"--dropdown-distance: ${this.distance}px;\"\n @click=${this.handlePanelClick}\n >\n ${this.arrow\n ? html`<div class=\"dropdown__arrow\"></div>`\n : nothing}\n <slot name=\"content\"></slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-dropdown': BpDropdown;\n }\n}\n"],"names":["dropdownStyles","css","BpDropdown","LitElement","changedProperties","event","target","html","nothing","__decorateClass","property","query","customElement"],"mappings":"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"}
|