@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-filters/pds-filter/stories/pds-filter.stories.js

@@ -0,0 +1,87 @@
+import { html } from 'lit';
+
+
+export default {
+
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'selected', 'more', 'clear'],
+    },
+  },
+  component: 'pds-filter',
+  parameters: {},
+  title: 'components/Filters/Filter',
+};
+
+const BaseTemplate = (args) => html`
+  <pds-filter
+    component-id="${args.componentId}"
+    variant="${args.variant}"
+    text="${args.text}"
+    icon="${args.icon}"
+  >
+    <p>Filter options go here</p>
+  </pds-filter>
+`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'filter-default',
+  variant: 'default',
+  text: 'Trigger',
+  icon: 'flash',
+};
+
+export const Selected = BaseTemplate.bind();
+Selected.args = {
+  componentId: 'filter-selected',
+  variant: 'selected',
+  text: 'Grant an offer',
+  icon: 'switch-vertical',
+};
+
+export const More = BaseTemplate.bind();
+More.args = {
+  componentId: 'filter-more',
+  variant: 'more',
+  text: 'More Filters',
+  icon: 'add-circle',
+};
+
+export const Clear = (args) => html`
+  <pds-filter
+    component-id="${args.componentId}"
+    variant="clear"
+    text="${args.text}"
+  >
+  </pds-filter>
+`;
+Clear.args = {
+  componentId: 'filter-clear',
+  text: 'Clear all',
+};
+
+const VariantsTemplate = () => html`
+  <pds-filters component-id="all-variants">
+    <pds-filter component-id="variant-default" variant="default" text="Trigger" icon="flash">
+      <p>Filter options go here</p>
+    </pds-filter>
+
+    <pds-filter component-id="variant-selected" variant="selected" text="Grant an offer" icon="switch-vertical">
+      <p>Filter options go here</p>
+    </pds-filter>
+
+    <pds-filter component-id="variant-more" variant="more" text="More filters" icon="add-circle">
+      <p>Filter options go here</p>
+    </pds-filter>
+
+    <pds-filter component-id="variant-clear" variant="clear" text="Clear all">
+    </pds-filter>
+  </pds-filters>
+`;
+
+export const AllVariants = VariantsTemplate.bind();
+AllVariants.args = {};

package/dist/collection/components/pds-filters/pds-filters.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+}
+
+.pds-filters {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pine-dimension-100);
+}

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

@@ -0,0 +1,44 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot (default) - Container for pds-filter components.
+ */
+export class PdsFilters {
+    render() {
+        return (h(Host, { key: '4a5ed2d7e80d82be9517682ee66e464fa61ea45b' }, h("div", { key: '7cabd4f934c17b14268c28f9ce99e8900795c516', class: "pds-filters" }, h("slot", { key: 'a1d01f1be8885c3cf68f98df59d67f56709f00e8' }))));
+    }
+    static get is() { return "pds-filters"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-filters.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-filters.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,34 @@
+import { html } from 'lit';
+
+
+export default {
+
+  component: 'pds-filters',
+  parameters: {},
+  title: 'components/Filters',
+};
+
+const BaseTemplate = (args) => html`
+  <pds-filters component-id="${args.componentId}">
+    <pds-filter component-id="filter-1" variant="default" text="Trigger" icon="flash">
+      <p>Filter options go here</p>
+    </pds-filter>
+    <pds-filter component-id="filter-2" variant="selected" text="Grant an offer" icon="switch-vertical">
+      <p>Filter options go here</p>
+    </pds-filter>
+    <pds-filter component-id="filter-3" variant="default" text="Status" icon="activity">
+      <p>Filter options go here</p>
+    </pds-filter>
+    <pds-filter component-id="filter-4" variant="more" text="More filters" icon="add-circle">
+      <p>Filter options go here</p>
+    </pds-filter>
+    <pds-filter component-id="filter-5" variant="clear" text="Clear all">
+    </pds-filter>
+  </pds-filters>
+`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default-filters',
+};
+

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

@@ -8,9 +8,9 @@ export default {
   title: 'components/Icon'
 }
 
-const BaseTemplate = (args) => html`<pds-icon color=${args.color} name=${args.name} size=${args.size}></pds-icon>`;
+const BaseTemplate = (args) => html`<pds-icon color=${args.color} name=${args.name} size=${args.size} flip-rtl=${args.flipRtl}></pds-icon>`;
 
 export const Default = BaseTemplate.bind();
 Default.args = {
-  name: 'upload'
+  name: 'headset'
 };

package/dist/collection/components/pds-image/image-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/pds-image/pds-image.css

@@ -1,13 +1,25 @@
 :host {
   /**
-   * @prop --image-aspect-ratio: The image's aspect ratio.
+   * @prop --dimension-aspect-ratio: The image's aspect ratio.
+   * @prop --dimension-object-fit: How the image fills the shape its aspect ratio gives it.
   */
   --dimension-aspect-ratio: auto;
+  --dimension-object-fit: cover;
   display: inline-block;
 }
 
 img {
   aspect-ratio: var(--dimension-aspect-ratio);
+  display: block;
   height: auto;
+  max-width: 100%;
+  object-fit: var(--dimension-object-fit);
+}
+
+:host(.pds-image--has-ratio) {
+  display: block;
+}
+
+:host(.pds-image--has-ratio) img {
   width: 100%;
 }

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

@@ -1,19 +1,155 @@
 import { Host, h } from "@stencil/core";
 export class PdsImage {
     constructor() {
+        /**
+         * The image's alt text. Defaults to an empty string, which marks the image
+         * as decorative and hides it from screen readers, so set it on any image
+         * that carries information.
+         * @defaultValue ''
+         */
         this.alt = '';
-        this.componentId = undefined;
-        this.height = undefined;
+        /**
+         * Determines how the image fills the shape set by `ratio`.
+         * Has no effect if `ratio` is not set.
+         * @defaultValue cover
+         */
+        this.fit = 'cover';
+        /**
+         * Indicates how the browser should load the image.
+         * @defaultValue eager
+         */
         this.loading = 'eager';
-        this.sizes = undefined;
-        this.src = undefined;
-        this.srcset = undefined;
-        this.width = undefined;
+        /**
+         * The source and event last emitted. A cached image can report `complete` on first
+         * render and still fire its own `load` event afterwards, so this keeps one source
+         * from emitting twice. A `load` still replaces an `error` for the same source, in
+         * case `decode()` misjudged an image that did load.
+         */
+        this.settled = null;
+        this.emitLoad = () => {
+            var _a;
+            if (!this.hasSource())
+                return;
+            const { currentSrc, naturalHeight, naturalWidth } = this.imageEl;
+            if (!this.showsCurrentSource())
+                return;
+            if (((_a = this.settled) === null || _a === void 0 ? void 0 : _a.src) === currentSrc && this.settled.type === 'load')
+                return;
+            this.settled = { src: currentSrc, type: 'load' };
+            this.pdsImageLoad.emit({ currentSrc, naturalHeight, naturalWidth });
+        };
+        this.emitError = () => {
+            var _a;
+            if (!this.hasSource())
+                return;
+            const { currentSrc } = this.imageEl;
+            if (!this.showsCurrentSource())
+                return;
+            if (((_a = this.settled) === null || _a === void 0 ? void 0 : _a.src) === currentSrc)
+                return;
+            this.settled = { src: currentSrc, type: 'error' };
+            this.pdsImageError.emit({ currentSrc });
+        };
+    }
+    handleSourceChange() {
+        this.settled = null;
+    }
+    componentDidLoad() {
+        const img = this.imageEl;
+        // With no `src` or `srcset` there is nothing to load and no event to emit. An empty
+        // `src` still counts: the browser treats it as a failed load.
+        if (!(img === null || img === void 0 ? void 0 : img.complete) || !this.hasSource())
+            return;
+        if (img.naturalWidth > 0) {
+            this.emitLoad();
+            return;
+        }
+        // `complete` with no intrinsic width is either a broken image or an SVG with no
+        // intrinsic size, and only decoding tells them apart. Without `decode()`, leave it
+        // to the native events.
+        if (typeof img.decode !== 'function')
+            return;
+        const src = img.currentSrc;
+        img.decode().then(() => img.currentSrc === src && this.emitLoad(), () => img.currentSrc === src && this.emitError());
+    }
+    // With no `src` or `srcset` attribute at all there is nothing to load and no event to
+    // emit. Clearing `src` can leave a brief window where Stencil has removed the attribute
+    // but a native `error` for the old, momentarily-empty `src` is still in flight (Firefox,
+    // Safari) — this check, read live at emit time, is what catches that window.
+    hasSource() {
+        const img = this.imageEl;
+        return img.hasAttribute('src') || img.hasAttribute('srcset');
+    }
+    /**
+     * The resolved absolute URL `src` would become once applied, or `undefined` for no
+     * `src`. Resolving it (rather than comparing raw attribute text) matches `img.src`
+     * even when Stencil skipped writing the attribute because the resolved value already
+     * equaled it, such as a `src` change from a relative to an equivalent absolute URL.
+     */
+    resolvedSrc() {
+        if (this.src == null)
+            return undefined;
+        try {
+            return new URL(this.src, document.baseURI).href;
+        }
+        catch (_a) {
+            return this.src;
+        }
+    }
+    /**
+     * Whether the inner image is showing the current `src` and `srcset`. Right after
+     * either changes, and before the next render applies it, an event can still arrive
+     * for the old source, and it shouldn't be emitted for the new one.
+     */
+    showsCurrentSource() {
+        var _a, _b;
+        const img = this.imageEl;
+        if (((_a = img.getAttribute('srcset')) !== null && _a !== void 0 ? _a : undefined) !== ((_b = this.srcset) !== null && _b !== void 0 ? _b : undefined))
+            return false;
+        const expectedSrc = this.resolvedSrc();
+        const srcMatches = expectedSrc === undefined ? !img.hasAttribute('src') : img.src === expectedSrc;
+        if (!srcMatches)
+            return false;
+        // Without `srcset`, a `load`/`error` for the right `src` should already be reflected in
+        // `currentSrc`. If it isn't yet, a stale native event from the previous source is still in
+        // flight — such as a cached image's `load` arriving just after a same-tick re-render
+        // already applied the new `src`. Skipped for an empty `src`: an empty attribute resolves
+        // `img.src` to the document's own URL, which `currentSrc` never settles to. `currentSrc` is
+        // already an absolute URL in a real browser, so resolving it here is a no-op there; it only
+        // matters in test environments whose mocked `currentSrc` isn't resolved the way `img.src` is.
+        if (!this.srcset && this.src) {
+            try {
+                return new URL(img.currentSrc, document.baseURI).href === img.src;
+            }
+            catch (_c) {
+                return img.currentSrc === img.src;
+            }
+        }
+        return true;
+    }
+    imageRatio() {
+        var _a;
+        const ratios = {
+            square: '1 / 1',
+            landscape: '4 / 3',
+            wide: '16 / 9',
+            portrait: '3 / 4',
+            tall: '9 / 16',
+        };
+        return (_a = ratios[this.ratio]) !== null && _a !== void 0 ? _a : this.ratio;
     }
     render() {
-        return (h(Host, { key: '8d97b63e1c5b0eb72117d6378a0b6d869c0dbdea', class: {
+        // `!= null`, not `!== undefined`: removing the attribute sets the prop to `null`, not `undefined`.
+        const hasRatio = this.ratio != null && this.ratio !== '';
+        // `fit` only means something once a ratio gives the image a shape to
+        // overflow, so neither is applied until `ratio` is set.
+        const ratioStyle = hasRatio
+            ? { aspectRatio: this.imageRatio(), objectFit: this.fit }
+            : undefined;
+        return (h(Host, { key: 'f01ae0cef8a08b686a62affe14e58661115f1e2e', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '3cc2d1c185244c8e8de2f7258b85194b37a4ff38', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+                'pds-image--has-ratio': hasRatio,
+            } }, h("img", { key: '3e609d3b73154ea5c83ae2df58352b0021075373', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, style: ratioStyle, width: this.width, onLoad: this.emitLoad, onError: this.emitError, ref: (el) => (this.imageEl = el) })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }
@@ -40,11 +176,16 @@ export class PdsImage {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The image's alt tag. If none is provided,\nit will default to an empty string."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "''"
+                        }],
+                    "text": "The image's alt text. Defaults to an empty string, which marks the image\nas decorative and hides it from screen readers, so set it on any image\nthat carries information."
                 },
-                "attribute": "alt",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "alt",
                 "defaultValue": "''"
             },
             "componentId": {
@@ -59,10 +200,35 @@ export class PdsImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "fit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'contain' | 'cover' | 'fill' | 'none' | 'scale-down'",
+                    "resolved": "\"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "cover"
+                        }],
+                    "text": "Determines how the image fills the shape set by `ratio`.\nHas no effect if `ratio` is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fit",
+                "defaultValue": "'cover'"
             },
             "height": {
                 "type": "number",
@@ -76,10 +242,12 @@ export class PdsImage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The height of the image in pixels. Setting this will\ndevote space in the layout to prevent layout\nshifts when the image is loaded."
+                    "text": "The height of the image in pixels. `height: auto` lets the loaded image's own\nproportions decide its rendered height, so unlike `width` this does not reserve\nspace before the image loads."
                 },
-                "attribute": "height",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
             },
             "loading": {
                 "type": "string",
@@ -92,13 +260,48 @@ export class PdsImage {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "eager"
+                        }],
                     "text": "Indicates how the browser should load the image."
                 },
-                "attribute": "loading",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "loading",
                 "defaultValue": "'eager'"
             },
+            "ratio": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ImageRatioType | (string & Record<never, never>)",
+                    "resolved": "\"landscape\" | \"portrait\" | \"square\" | \"tall\" | \"wide\" | string & Record<never, never>",
+                    "references": {
+                        "ImageRatioType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ImageRatioType",
+                            "referenceLocation": "ImageRatioType"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The aspect ratio the image is sized to, cropping whatever overflows the shape. A preset\n(`square` 1/1, `landscape` 4/3, `wide` 16/9, `portrait` 3/4, `tall` 9/16) or any custom\nCSS ratio, such as `21 / 9`. Use this, not `height` and `width`, to crop: those only\nreserve space, and only `width` reliably does even that."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ratio"
+            },
             "sizes": {
                 "type": "string",
                 "mutable": false,
@@ -111,10 +314,12 @@ export class PdsImage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the intended display size of an image\nwithin certian breakpoints. Has no effect if `srcset`\nis not set or value has no width descriptor."
+                    "text": "Determines the intended display size of an image\nwithin certain breakpoints. Has no effect if `srcset`\nis not set or value has no width descriptor."
                 },
-                "attribute": "sizes",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sizes"
             },
             "src": {
                 "type": "string",
@@ -130,8 +335,10 @@ export class PdsImage {
                     "tags": [],
                     "text": "The image's source."
                 },
-                "attribute": "src",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
             },
             "srcset": {
                 "type": "string",
@@ -145,10 +352,12 @@ export class PdsImage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A set of image sources for the browser to use."
+                    "text": "A set of image sources for the browser to use\nfor responsiveness."
                 },
-                "attribute": "srcset",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "srcset"
             },
             "width": {
                 "type": "number",
@@ -162,12 +371,69 @@ export class PdsImage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The width of the image in pixels. Setting this will\ndevote space in the layout to prevent layout\nshifts when the image is loaded."
+                    "text": "The width of the image in pixels. This reserves the image's width before it\nloads, but not its height: to reserve the height too, set\n`--dimension-aspect-ratio` to the image's own proportions."
                 },
-                "attribute": "width",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "pdsImageLoad",
+                "name": "pdsImageLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the image loads. Also emitted on first render for an image that\nfinished loading before the component could listen, such as a server-rendered\nimage. Emitted again after `src` or `srcset` changes and the new image loads, or\nwhen the browser picks a different `srcset` candidate, such as on a resize. Bubbles\nand is composed, so a listener on an ancestor gets every `pds-image`'s events \u2014\ncheck `event.target` when more than one is in scope."
+                },
+                "complexType": {
+                    "original": "ImageLoadEventDetail",
+                    "resolved": "ImageLoadEventDetail",
+                    "references": {
+                        "ImageLoadEventDetail": {
+                            "location": "import",
+                            "path": "./image-interface",
+                            "id": "src/components/pds-image/image-interface.ts::ImageLoadEventDetail",
+                            "referenceLocation": "ImageLoadEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsImageError",
+                "name": "pdsImageError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the image fails to load, such as for a broken or empty `src`. An image\nwith no `src` or `srcset` at all emits neither event, since it has nothing to load.\nEmitted again after `src` or `srcset` changes and the new image fails. Bubbles and is\ncomposed, so a listener on an ancestor gets every `pds-image`'s events \u2014 check\n`event.target` when more than one is in scope."
+                },
+                "complexType": {
+                    "original": "ImageErrorEventDetail",
+                    "resolved": "ImageErrorEventDetail",
+                    "references": {
+                        "ImageErrorEventDetail": {
+                            "location": "import",
+                            "path": "./image-interface",
+                            "id": "src/components/pds-image/image-interface.ts::ImageErrorEventDetail",
+                            "referenceLocation": "ImageErrorEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "handleSourceChange"
+            }, {
+                "propName": "srcset",
+                "methodName": "handleSourceChange"
+            }];
+    }
 }
-//# sourceMappingURL=pds-image.js.map