@pine-ds/core 4.10.0 → 4.12.0

package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js

@@ -9,10 +9,10 @@ export default {
     disabled: false,
     dropdownPlacement: 'bottom-start',
     dropdownMount: 'host',
-    dropdownWidth: '236px',
+    dropdownWidth: '252px',
     errorMessage: null,
-    flyoutMaxWidth: '380px',
-    flyoutMinWidth: '280px',
+    flyoutMaxWidth: '388px',
+    flyoutMinWidth: '288px',
     groupDisplay: 'inline',
     helperMessage: null,
     hideLabel: false,
@@ -166,7 +166,7 @@ export const ProgrammaticClear = (args) => html`
   </pds-combobox>
   <pds-button
     variant="secondary"
-    size="sm"
+    size="small"
     @click=${() => document.querySelector('#combobox-clear-story').clear()}
   >
     Reset
@@ -796,6 +796,37 @@ GroupBadges.argTypes = {
   groupDisplay: { control: 'inline-radio', options: ['inline', 'flyout', 'drill-in'] },
 };
 
+// A selected option with a badge: the list row shows its "New" badge, and the filled field shows
+// the option's icon and label only. data-search-text lets search find it by more than its label.
+export const SelectedOptionWithBadge = (args) => html`
+<div style="min-height: 320px;">
+  <pds-combobox
+    component-id="combobox-selected-badge"
+    label=${args.label}
+    placeholder=${args.placeholder}
+    trigger="button"
+    trigger-shape="input"
+    mode="select-only"
+    panel-search
+    search-placeholder="Search categories"
+    search-options-label="Search categories"
+    trigger-width="300px"
+    dropdown-width="300px"
+    value=${args.value}
+  >
+    <option value="assessment" data-icon="assessment">Assessment</option>
+    <option value="automation" data-icon="automations" data-badge="New" data-badge-sentiment="accent"
+      data-search-text="Automation started finished">Automation</option>
+    <option value="tag" data-icon="hashtag" data-search-text="Tag has any tag">Tag</option>
+  </pds-combobox>
+</div>`;
+
+SelectedOptionWithBadge.args = {
+  label: 'Category',
+  placeholder: 'Select a category',
+  value: 'automation',
+};
+
 export const OptionGroupsPdsText = (args) => html`
 <pds-combobox
   component-id="combobox-pds-text-groups"

package/dist/collection/components/pds-copytext/pds-copytext.js

@@ -107,7 +107,7 @@ export class PdsCopytext {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '35d74eaecedd432f7852545522f9ce72396f9ab9', class: hostClass, id: this.componentId }, h("pds-button", { key: '9550ce2fb21166e9726b08b5928036244c7b729e', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '47af45448759c911ca4ca03d0158088289b622e0', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '3ddab7c3e7063843cd606ffb19481cae3792db43', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '2c3bf9cd49adf9a68be5f6cf3bdf0bb29aab956a', class: hostClass, id: this.componentId }, h("pds-button", { key: '88ff5d9b7071583c76c8875834b9d4fda274d711', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '5dee0ec40cbabf3d781037a785ec7c5aa7621121', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '3399b3573670f32f6a70f78f1ae60c9cba031955', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }
@@ -241,7 +241,7 @@ export class PdsCopytext {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event fired when copyText button is clicked."
+                    "text": "Emitted after a click, once the copy to the clipboard succeeds or fails.\n`detail` is `Copied to clipboard` on success, or `Error writing text to clipboard: ` followed by the error on failure.\nNot emitted when `navigator.clipboard` is undefined, as it is outside a secure context."
                 },
                 "complexType": {
                     "original": "string",

package/dist/collection/components/pds-datepicker/date-utils.js

@@ -130,3 +130,45 @@ export function dateFormatter(locale, options) {
 export function formatDate(date, locale, options) {
     return dateFormatter(locale, options).format(date);
 }
+/**
+ * Month-day mode's year. A leap year, so February has its 29th; every date the mode holds is in it,
+ * and the value drops it (`--MM-DD`).
+ */
+export const MONTH_DAY_YEAR = 2000;
+const MONTH_DAY = /^--(\d{2})-(\d{2})$/;
+/** The same month and day in month-day mode's year. */
+export function inMonthDayYear(date) {
+    return new Date(Date.UTC(MONTH_DAY_YEAR, date.getUTCMonth(), date.getUTCDate()));
+}
+/**
+ * Parses a month and day, `--MM-DD` (ISO 8601 without a year), to a date in month-day mode's year.
+ * A full `YYYY-MM-DD` reads as its month and day. `null` when it isn't a real month and day.
+ */
+export function parseMonthDay(value) {
+    const text = (value !== null && value !== void 0 ? value : '').trim();
+    const match = MONTH_DAY.exec(text);
+    if (match)
+        return parseIsoDate(`${MONTH_DAY_YEAR}-${match[1]}-${match[2]}`);
+    const date = parseIsoDate(text);
+    return date && inMonthDayYear(date);
+}
+/** A date's month and day as `--MM-DD`. */
+export function toMonthDay(date) {
+    return `-${toIsoDate(date).slice(4)}`;
+}
+/**
+ * A month's days for month-day mode, which has no weekdays: rows of seven from the 1st, with the
+ * last row filled out with `null`.
+ */
+export function monthDayRows(month) {
+    const cells = [];
+    for (let day = 1; day <= daysInMonth(MONTH_DAY_YEAR, month); day++) {
+        cells.push(new Date(Date.UTC(MONTH_DAY_YEAR, month, day)));
+    }
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const rows = [];
+    for (let i = 0; i < cells.length; i += 7)
+        rows.push(cells.slice(i, i + 7));
+    return rows;
+}