@pine-ds/core 0.2.1 → 0.2.2
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/components/pds-accordion.js +1 -1
- package/components/pds-accordion.js.map +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js.map +1 -1
- package/dist/collection/components/pds-accordion/pds-accordion.css +3 -3
- package/dist/docs.json +1 -1
- package/dist/esm/pds-accordion.entry.js +1 -1
- package/dist/esm/pds-accordion.entry.js.map +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js.map +1 -1
- package/dist/pine-core/p-480a95e5.system.js +1 -1
- package/dist/pine-core/p-9010fb2d.entry.js +2 -0
- package/dist/pine-core/p-9010fb2d.entry.js.map +1 -0
- package/dist/pine-core/p-d51c9de1.system.entry.js +2 -0
- package/dist/pine-core/p-d51c9de1.system.entry.js.map +1 -0
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/hydrate/index.js +1 -1
- package/package.json +2 -2
- package/dist/pine-core/p-452d82a8.system.entry.js +0 -2
- package/dist/pine-core/p-452d82a8.system.entry.js.map +0 -1
- package/dist/pine-core/p-722c93b9.entry.js +0 -2
- package/dist/pine-core/p-722c93b9.entry.js.map +0 -1
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
2
2
|
import { d as downSmall } from './index2.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './pds-icon2.js';
|
|
4
4
|
|
|
5
|
-
const pdsAccordionCss = ":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:
|
|
5
|
+
const pdsAccordionCss = ":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 5s ease-in-out;transition:max-height 5s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";
|
|
6
6
|
const PdsAccordionStyle0 = pdsAccordionCss;
|
|
7
7
|
|
|
8
8
|
const PdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PdsAccordion extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pds-accordion.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"pds-accordion.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,s8FAAs8F,CAAC;AAC/9F,2BAAe,eAAe;;MCWjBA,cAAY;;;;;QA+Bf,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SACnC,CAAA;QAEO,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;gBACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;aACvB;YACD,OAAO,EAAE,CAAC;SACX,CAAA;;sBAtBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QAEvB,IAAK,QAAQ,KAAK,IAAI,EAAG;YACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC3C;KACF;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAwB,KAC1F,kEACE,6DAAM,IAAI,EAAC,OAAO,cAAe,EACjC,iEAAU,IAAI,EAAG,SAAS,GAAK,CACvB,EACV,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,IAClH,8DAAQ,CACJ,CACE,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsAccordion"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 5s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-9b7c547c.js');
|
|
6
6
|
const index$1 = require('./index-968864bf.js');
|
|
7
7
|
|
|
8
|
-
const pdsAccordionCss = ":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:
|
|
8
|
+
const pdsAccordionCss = ":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 5s ease-in-out;transition:max-height 5s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";
|
|
9
9
|
const PdsAccordionStyle0 = pdsAccordionCss;
|
|
10
10
|
|
|
11
11
|
const PdsAccordion = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pds-accordion.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"pds-accordion.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,s8FAAs8F,CAAC;AAC/9F,2BAAe,eAAe;;MCWjB,YAAY;;;QA+Bf,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SACnC,CAAA;QAEO,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;gBACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;aACvB;YACD,OAAO,EAAE,CAAC;SACX,CAAA;;sBAtBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QAEvB,IAAK,QAAQ,KAAK,IAAI,EAAG;YACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC3C;KACF;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IAC9CD,sFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAwB,KAC1FA,wEACEA,mEAAM,IAAI,EAAC,OAAO,cAAe,EACjCA,uEAAU,IAAI,EAAGE,iBAAS,GAAK,CACvB,EACVF,kEAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,IAClHA,oEAAQ,CACJ,CACE,CACL,EACP;KACH;;;;;;;;;","names":["h","Host","downSmall"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 5s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
details {
|
|
6
6
|
--animation-transform-timing: 200ms;
|
|
7
7
|
--border-radius: var(--pine-spacing-xs);
|
|
8
|
-
--box-shadow-focus:
|
|
8
|
+
--box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);
|
|
9
9
|
--color-content-background: var(--pine-base-color-white);
|
|
10
10
|
--color-background-hover: var(--pine-color-neutral-grey-300);
|
|
11
11
|
--color-font: var(--pine-color-neutral-charcoal-200);
|
|
@@ -39,11 +39,11 @@ details[open] summary pds-icon {
|
|
|
39
39
|
transition: transform var(--animation-transform-timing);
|
|
40
40
|
}
|
|
41
41
|
details[open] .pds-accordion__body {
|
|
42
|
-
transition: max-height
|
|
42
|
+
transition: max-height 5s ease-in-out;
|
|
43
43
|
/* stylelint-disable-next-line selector-no-qualifying-type */
|
|
44
44
|
}
|
|
45
45
|
details[open] .pds-accordion__body.open {
|
|
46
|
-
max-height:
|
|
46
|
+
max-height: 1000px;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
summary {
|
package/dist/docs.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-5e54ea50.js';
|
|
2
2
|
import { d as downSmall } from './index-9835dc94.js';
|
|
3
3
|
|
|
4
|
-
const pdsAccordionCss = ":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:
|
|
4
|
+
const pdsAccordionCss = ":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 5s ease-in-out;transition:max-height 5s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";
|
|
5
5
|
const PdsAccordionStyle0 = pdsAccordionCss;
|
|
6
6
|
|
|
7
7
|
const PdsAccordion = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pds-accordion.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,
|
|
1
|
+
{"file":"pds-accordion.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,s8FAAs8F,CAAC;AAC/9F,2BAAe,eAAe;;MCWjB,YAAY;;;QA+Bf,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SACnC,CAAA;QAEO,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;gBACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;aACvB;YACD,OAAO,EAAE,CAAC;SACX,CAAA;;sBAtBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;QAEvB,IAAK,QAAQ,KAAK,IAAI,EAAG;YACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;SAC3C;KACF;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAwB,KAC1F,kEACE,6DAAM,IAAI,EAAC,OAAO,cAAe,EACjC,iEAAU,IAAI,EAAG,SAAS,GAAK,CACvB,EACV,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,IAClH,8DAAQ,CACJ,CACE,CACL,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 5s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as registerInstance,h,H as Host}from"./index-5e54ea50.js";import{d as downSmall}from"./index-9835dc94.js";var pdsAccordionCss=":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:
|
|
1
|
+
import{r as registerInstance,h,H as Host}from"./index-5e54ea50.js";import{d as downSmall}from"./index-9835dc94.js";var pdsAccordionCss=":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 5s ease-in-out;transition:max-height 5s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";var PdsAccordionStyle0=pdsAccordionCss;var PdsAccordion=function(){function n(n){var a=this;registerInstance(this,n);this.handleToggle=function(){a.isOpen=a.detailsEl.open};this.getOpenAttribute=function(){if(a.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}n.prototype.handleOpenState=function(n){this.isOpen=n;if(n===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}};n.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};n.prototype.render=function(){var n=this;return h(Host,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},h("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:function(a){return n.detailsEl=a}}),h("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},h("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),h("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:downSmall})),h("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:"pds-accordion__body ".concat(this.isOpen?"open":""),ref:function(a){return n.containerEl=a}},h("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))};Object.defineProperty(n,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return n}();PdsAccordion.style=PdsAccordionStyle0;export{PdsAccordion as pds_accordion};
|
|
2
2
|
//# sourceMappingURL=pds-accordion.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","prototype","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","concat"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus:
|
|
1
|
+
{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","prototype","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","concat"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 5s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"mHAAA,IAAMA,gBAAkB,u8FACxB,IAAAC,mBAAeD,gB,ICWFE,aAAY,W,kDA+BfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCArBY,K,CAGrBN,EAAAQ,UAAAC,gBAAA,SAAgBC,GACdT,KAAKG,OAASM,EAEd,GAAKA,IAAa,KAAO,CACvBT,KAAKU,YAAYC,UAAUC,IAAI,O,KAC1B,CACLZ,KAAKU,YAAYC,UAAUE,OAAO,O,GAetCd,EAAAQ,UAAAO,iBAAA,WACEd,KAAKI,UAAUW,iBAAiB,SAAUf,KAAKC,a,EAGjDF,EAAAQ,UAAAS,OAAA,eAAAd,EAAAF,KACE,OACEiB,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAIrB,KAAKsB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAanB,KAAKM,mBAAkB,CAAEmB,IAAK,SAACC,GAAO,OAAAxB,EAAKE,UAAYsB,CAAjB,IACjDT,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,aAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAAU,OAAuB9B,KAAKG,OAAS,OAAS,IAAMsB,IAAK,SAACC,GAAO,OAAAxB,EAAKQ,YAAcgB,CAAnB,GAC3ET,EAAA,QAAAE,IAAA,+C,uIAvDa,G"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(e,n,t,o){function s(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,a){function i(e){try{d(o.next(e))}catch(e){a(e)}}function r(e){try{d(o["throw"](e))}catch(e){a(e)}}function d(e){e.done?t(e.value):s(e.value).then(i,r)}d((o=o.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,s,a,i;return i={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function r(e){return function(n){return d([e,n])}}function d(r){if(o)throw new TypeError("Generator is already executing.");while(i&&(i=0,r[0]&&(t=0)),t)try{if(o=1,s&&(a=r[0]&2?s["return"]:r[0]?s["throw"]||((a=s["return"])&&a.call(s),0):s.next)&&!(a=a.call(s,r[1])).done)return a;if(s=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:t.label++;return{value:r[1],done:false};case 5:t.label++;s=r[1];r=[0];continue;case 7:r=t.ops.pop();t.trys.pop();continue;default:if(!(a=t.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){t=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){t.label=r[1];break}if(r[0]===6&&t.label<a[1]){t.label=a[1];a=r;break}if(a&&t.label<a[2]){t.label=a[2];t.ops.push(r);break}if(a[2])t.ops.pop();t.trys.pop();continue}r=n.call(e,t)}catch(e){r=[6,e];s=0}finally{o=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-445792b5.system.js","./p-56ba5cbf.system.js"],(function(e,n){"use strict";var t,o,s;return{setters:[function(n){t=n.p;o=n.b;e("setNonce",n.s)},function(e){s=e.g}],execute:function(){var e=this;var a=function(){var e=n.meta.url;var o={};if(e!==""){o.resourcesUrl=new URL(".",e).href}return t(o)};a().then((function(n){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,s()];case 1:e.sent();return[2,o([["p-e20cf701.system",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-99e033f1.system",[[1,"pds-table-head"]]],["p-02ff0a87.system",[[1,"pds-table-row",{isSelected:[32]}]]],["p-
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(e,n,t,o){function s(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,a){function i(e){try{d(o.next(e))}catch(e){a(e)}}function r(e){try{d(o["throw"](e))}catch(e){a(e)}}function d(e){e.done?t(e.value):s(e.value).then(i,r)}d((o=o.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,s,a,i;return i={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function r(e){return function(n){return d([e,n])}}function d(r){if(o)throw new TypeError("Generator is already executing.");while(i&&(i=0,r[0]&&(t=0)),t)try{if(o=1,s&&(a=r[0]&2?s["return"]:r[0]?s["throw"]||((a=s["return"])&&a.call(s),0):s.next)&&!(a=a.call(s,r[1])).done)return a;if(s=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:t.label++;return{value:r[1],done:false};case 5:t.label++;s=r[1];r=[0];continue;case 7:r=t.ops.pop();t.trys.pop();continue;default:if(!(a=t.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){t=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){t.label=r[1];break}if(r[0]===6&&t.label<a[1]){t.label=a[1];a=r;break}if(a&&t.label<a[2]){t.label=a[2];t.ops.push(r);break}if(a[2])t.ops.pop();t.trys.pop();continue}r=n.call(e,t)}catch(e){r=[6,e];s=0}finally{o=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-445792b5.system.js","./p-56ba5cbf.system.js"],(function(e,n){"use strict";var t,o,s;return{setters:[function(n){t=n.p;o=n.b;e("setNonce",n.s)},function(e){s=e.g}],execute:function(){var e=this;var a=function(){var e=n.meta.url;var o={};if(e!==""){o.resourcesUrl=new URL(".",e).href}return t(o)};a().then((function(n){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,s()];case 1:e.sent();return[2,o([["p-e20cf701.system",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-99e033f1.system",[[1,"pds-table-head"]]],["p-02ff0a87.system",[[1,"pds-table-row",{isSelected:[32]}]]],["p-d51c9de1.system",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-483b873b.system",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-50222d44.system",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-e7ea6002.system",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-44be28a1.system",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],handle:[4]}]]],["p-fe949ea3.system",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-4f3c9367.system",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-b851f394.system",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-c6448545.system",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-cbe37d9d.system",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-ce887d74.system",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-c0c0038a.system",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-0b4a3e15.system",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-5729cd96.system",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-c20075a6.system",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-d7606cb1.system",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"]]]]],["p-f30b2078.system",[[1,"pds-table-body"]]],["p-c04fb6c0.system",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-2e9881db.system",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-a3c3dae3.system",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-a0368388.system",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-36a8c980.system",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-df656817.system",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-19cb2923.system",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32]}]]],["p-1176b1ae.system",[[1,"pds-checkbox",{checked:[4],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[4],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]}],[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]]],n)]}}))}))}))}}}));
|
|
2
2
|
//# sourceMappingURL=p-480a95e5.system.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as i,H as n}from"./p-e74f35bd.js";import{d as r}from"./p-450da80f.js";const t=":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 5s ease-in-out;transition:max-height 5s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";const o=t;const s=class{constructor(i){a(this,i);this.handleToggle=()=>{this.isOpen=this.detailsEl.open};this.getOpenAttribute=()=>{if(this.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}handleOpenState(a){this.isOpen=a;if(a===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}}componentDidLoad(){this.detailsEl.addEventListener("toggle",this.handleToggle)}render(){return i(n,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:a=>this.detailsEl=a}),i("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},i("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),i("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:r})),i("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:`pds-accordion__body ${this.isOpen?"open":""}`,ref:a=>this.containerEl=a},i("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))}static get watchers(){return{isOpen:["handleOpenState"]}}};s.style=o;export{s as pds_accordion};
|
|
2
|
+
//# sourceMappingURL=p-9010fb2d.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","isOpen","detailsEl","open","getOpenAttribute","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 5s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAkB,u8FACxB,MAAAC,EAAeD,E,MCWFE,EAAY,M,yBA+BfC,KAAAC,aAAe,KACrBD,KAAKE,OAASF,KAAKG,UAAUC,IAAI,EAG3BJ,KAAAK,iBAAmB,KACzB,GAAIL,KAAKE,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,EAAE,E,uCArBU,K,CAGrB,eAAAE,CAAgBC,GACdP,KAAKE,OAASK,EAEd,GAAKA,IAAa,KAAO,CACvBP,KAAKQ,YAAYC,UAAUC,IAAI,O,KAC1B,CACLV,KAAKQ,YAAYC,UAAUE,OAAO,O,EAetC,gBAAAC,GACEZ,KAAKG,UAAUU,iBAAiB,SAAUb,KAAKC,a,CAGjD,MAAAa,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAInB,KAAKoB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAajB,KAAKK,mBAAkB,CAAEkB,IAAMC,GAAOxB,KAAKG,UAAYqB,IAClET,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,KAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAuBlB,KAAKE,OAAS,OAAS,KAAMqB,IAAMC,GAAOxB,KAAKQ,YAAcgB,GAC9FT,EAAA,QAAAE,IAAA,+C"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["./p-445792b5.system.js","./p-2ca5f853.system.js"],(function(n){"use strict";var a,i,r,t;return{setters:[function(n){a=n.r;i=n.h;r=n.H},function(n){t=n.d}],execute:function(){var o=":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 5s ease-in-out;transition:max-height 5s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";var e=o;var s=n("pds_accordion",function(){function n(n){var i=this;a(this,n);this.handleToggle=function(){i.isOpen=i.detailsEl.open};this.getOpenAttribute=function(){if(i.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}n.prototype.handleOpenState=function(n){this.isOpen=n;if(n===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}};n.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};n.prototype.render=function(){var n=this;return i(r,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:function(a){return n.detailsEl=a}}),i("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},i("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),i("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:t})),i("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:"pds-accordion__body ".concat(this.isOpen?"open":""),ref:function(a){return n.containerEl=a}},i("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))};Object.defineProperty(n,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return n}());s.style=e}}}));
|
|
2
|
+
//# sourceMappingURL=p-d51c9de1.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","exports","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","class_1","prototype","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","concat"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 5s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"gMAAA,IAAMA,EAAkB,u8FACxB,IAAAC,EAAeD,E,ICWFE,EAAYC,EAAA,2B,mCA+BfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCArBY,K,CAGrBE,EAAAC,UAAAC,gBAAA,SAAgBC,GACdV,KAAKG,OAASO,EAEd,GAAKA,IAAa,KAAO,CACvBV,KAAKW,YAAYC,UAAUC,IAAI,O,KAC1B,CACLb,KAAKW,YAAYC,UAAUE,OAAO,O,GAetCP,EAAAC,UAAAO,iBAAA,WACEf,KAAKI,UAAUY,iBAAiB,SAAUhB,KAAKC,a,EAGjDM,EAAAC,UAAAS,OAAA,eAAAf,EAAAF,KACE,OACEkB,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAItB,KAAKuB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAapB,KAAKM,mBAAkB,CAAEoB,IAAK,SAACC,GAAO,OAAAzB,EAAKE,UAAYuB,CAAjB,IACjDT,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,KAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAAU,OAAuB/B,KAAKG,OAAS,OAAS,IAAMuB,IAAK,SAACC,GAAO,OAAAzB,EAAKS,YAAcgB,CAAnB,GAC3ET,EAAA,QAAAE,IAAA,+C,uIAvDa,I"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-e74f35bd.js";export{s as setNonce}from"./p-e74f35bd.js";import{g as n}from"./p-e1255160.js";const a=()=>{const o=import.meta.url;const n={};if(o!==""){n.resourcesUrl=new URL(".",o).href}return e(n)};a().then((async e=>{await n();return o([["p-7835a3e2",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-c707d9d0",[[1,"pds-table-head"]]],["p-93dd9bc7",[[1,"pds-table-row",{isSelected:[32]}]]],["p-
|
|
1
|
+
import{p as e,b as o}from"./p-e74f35bd.js";export{s as setNonce}from"./p-e74f35bd.js";import{g as n}from"./p-e1255160.js";const a=()=>{const o=import.meta.url;const n={};if(o!==""){n.resourcesUrl=new URL(".",o).href}return e(n)};a().then((async e=>{await n();return o([["p-7835a3e2",[[1,"pds-copytext",{border:[516],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]}]]],["p-c707d9d0",[[1,"pds-table-head"]]],["p-93dd9bc7",[[1,"pds-table-row",{isSelected:[32]}]]],["p-9010fb2d",[[1,"pds-accordion",{componentId:[1,"component-id"],isOpen:[1540,"open"]},null,{isOpen:["handleOpenState"]}]]],["p-395cf3d0",[[1,"pds-avatar",{alt:[1],badge:[4],componentId:[1,"component-id"],dropdown:[4],image:[1],size:[513],variant:[513]}]]],["p-46d00870",[[1,"pds-chip",{componentId:[1,"component-id"],sentiment:[1],dot:[4],label:[1],large:[4],variant:[1]}]]],["p-394e00a2",[[1,"pds-link",{componentId:[1,"component-id"],external:[4],variant:[1],fontSize:[1,"font-size"],href:[1]}]]],["p-4b5956a3",[[6,"pds-sortable-item",{enableActions:[4,"enable-actions"],componentId:[1,"component-id"],handle:[4]}]]],["p-869e7901",[[0,"pds-box",{alignItems:[1,"align-items"],auto:[4],backgroundColor:[1,"background-color"],border:[4],borderColor:[1,"border-color"],borderRadius:[1,"border-radius"],direction:[1],display:[1],fit:[4],gap:[1],flex:[1],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],minWidth:[1,"min-width"],offset:[1],offsetXs:[1,"offset-xs"],offsetSm:[1,"offset-sm"],offsetMd:[1,"offset-md"],offsetLg:[1,"offset-lg"],offsetXl:[1,"offset-xl"],padding:[1],shadow:[1],size:[1],sizeXs:[1,"size-xs"],sizeSm:[1,"size-sm"],sizeMd:[1,"size-md"],sizeLg:[1,"size-lg"],sizeXl:[1,"size-xl"]}]]],["p-5eb56ebf",[[1,"pds-divider",{componentId:[1,"component-id"],offset:[1],vertical:[4]}]]],["p-08c496ee",[[1,"pds-image",{alt:[1],componentId:[1,"component-id"],height:[2],loading:[1],sizes:[1],src:[1],srcset:[1],width:[2]}]]],["p-8cad6b7a",[[1,"pds-input",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],type:[1],value:[1025]}]]],["p-820c8929",[[1,"pds-progress",{animated:[4],componentId:[1,"component-id"],fillColor:[1,"fill-color"],label:[1],percent:[2],showPercent:[4,"show-percent"]}]]],["p-9a89fdb8",[[2,"pds-radio",{checked:[4],disabled:[4],errorMessage:[1,"error-message"],invalid:[4],componentId:[1,"component-id"],label:[1],helperMessage:[1,"helper-message"],name:[1],required:[4],value:[1]}]]],["p-525195d2",[[0,"pds-row",{alignItems:[1,"align-items"],border:[4],colGap:[1,"col-gap"],componentId:[1,"component-id"],justifyContent:[1,"justify-content"],minHeight:[1,"min-height"],noWrap:[4,"no-wrap"]}]]],["p-1a8582cd",[[6,"pds-sortable",{border:[516],componentId:[1,"component-id"],dividers:[516],handleType:[1,"handle-type"]}]]],["p-f72dc7fd",[[1,"pds-switch",{componentId:[1,"component-id"],checked:[4],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],name:[1],required:[4],type:[1],value:[1]}]]],["p-c0713e59",[[4,"pds-tab",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],index:[2],selected:[4]}]]],["p-f403ff37",[[1,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"]]]]],["p-ccb0d9ee",[[1,"pds-table-body"]]],["p-752dfaa6",[[4,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028]}]]],["p-6a7259df",[[1,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-aaced44a",[[1,"pds-textarea",{componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],value:[1025]}]]],["p-d3fe5de5",[[1,"pds-tooltip",{content:[1],componentId:[1,"component-id"],hasArrow:[4,"has-arrow"],htmlContent:[4,"html-content"],placement:[513],opened:[1540],isOpen:[32],showTooltip:[64],hideTooltip:[64]},null,{opened:["handleOpenToggle"]}]]],["p-780136bd",[[1,"pds-icon",{color:[1],icon:[8],name:[513],size:[513],src:[1],ariaLabel:[32],isVisible:[32],svgContent:[32]},null,{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}]]],["p-37977a94",[[1,"pds-button",{componentId:[1,"component-id"],disabled:[4],icon:[1],name:[1],value:[1],type:[1],variant:[1]}]]],["p-7e75c2e3",[[1,"pds-table-head-cell",{sortable:[4],sortingDirection:[32],tableScrolling:[32]}]]],["p-1acdba43",[[1,"pds-checkbox",{checked:[4],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[4],invalid:[4],label:[1],labelHidden:[4,"label-hidden"],name:[1],required:[4],value:[1]}],[1,"pds-table-cell",{truncate:[4],tableScrolling:[32]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=pine-core.esm.js.map
|
package/hydrate/index.js
CHANGED
|
@@ -7686,7 +7686,7 @@ const downSmall = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/sv
|
|
|
7686
7686
|
const launch = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path fill-rule='evenodd' d='M15.138.862a.664.664 0 0 1 .195.461v5.344a.667.667 0 0 1-1.333 0V2.943L7.805 9.138a.667.667 0 1 1-.943-.943L13.057 2H9.333a.667.667 0 0 1 0-1.333h5.333c.171 0 .342.065.472.195ZM1.333 2a.667.667 0 0 0-.666.667v12c0 .368.298.666.666.666h12a.667.667 0 0 0 .667-.666V10a.667.667 0 0 0-1.333 0v4H2V3.333h4A.667.667 0 1 0 6 2H1.333Z'/></svg>";
|
|
7687
7687
|
const userFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path d='M12.222 8.925A5.98 5.98 0 0 1 8 10.667a5.983 5.983 0 0 1-4.222-1.742A7.335 7.335 0 0 0 0 15.333c0 .368.299.667.667.667h14.666a.667.667 0 0 0 .667-.667 7.335 7.335 0 0 0-3.778-6.408Z'/><path d='M8 9.333A4.667 4.667 0 1 0 8 0a4.667 4.667 0 0 0 0 9.333Z'/></svg>";
|
|
7688
7688
|
|
|
7689
|
-
const pdsAccordionCss = "/*!@:host*/.sc-pds-accordion-h{display:block}/*!@details*/details.sc-pds-accordion{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:
|
|
7689
|
+
const pdsAccordionCss = "/*!@:host*/.sc-pds-accordion-h{display:block}/*!@details*/details.sc-pds-accordion{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}/*!@details pds-icon*/details.sc-pds-accordion pds-icon.sc-pds-accordion{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}/*!@details[open]*/details[open].sc-pds-accordion{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}/*!@details[open] summary*/details[open].sc-pds-accordion summary.sc-pds-accordion{color:var(--color-font-active);font-weight:var(--font-weight)}/*!@details[open] summary pds-icon*/details[open].sc-pds-accordion summary.sc-pds-accordion pds-icon.sc-pds-accordion{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}/*!@details[open] .pds-accordion__body*/details[open].sc-pds-accordion .pds-accordion__body.sc-pds-accordion{-webkit-transition:max-height 5s ease-in-out;transition:max-height 5s ease-in-out}/*!@details[open] .pds-accordion__body.open*/details[open].sc-pds-accordion .pds-accordion__body.open.sc-pds-accordion{max-height:1000px}/*!@summary*/summary.sc-pds-accordion{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}/*!@summary::-webkit-details-marker*/summary.sc-pds-accordion::-webkit-details-marker{display:none}/*!@summary:hover*/summary.sc-pds-accordion:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}/*!@summary:focus-visible*/summary.sc-pds-accordion:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}/*!@summary pds-icon*/summary.sc-pds-accordion pds-icon.sc-pds-accordion{-webkit-margin-start:auto;margin-inline-start:auto}/*!@.pds-accordion__body*/.pds-accordion__body.sc-pds-accordion{max-height:0;overflow:hidden}";
|
|
7690
7690
|
var PdsAccordionStyle0 = pdsAccordionCss;
|
|
7691
7691
|
|
|
7692
7692
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pine-ds/core",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Base components for Pine Design System",
|
|
6
6
|
"author": "Kajabi Design System Services",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@babel/core": "^7.19.3",
|
|
66
66
|
"@babel/preset-env": "^7.22.10",
|
|
67
|
-
"@pine-ds/doc-components": "
|
|
67
|
+
"@pine-ds/doc-components": "0.2.2",
|
|
68
68
|
"@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
|
|
69
69
|
"@stencil-community/eslint-plugin": "^0.5.0",
|
|
70
70
|
"@stencil/react-output-target": "^0.5.3",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
System.register(["./p-445792b5.system.js","./p-2ca5f853.system.js"],(function(n){"use strict";var a,i,r,t;return{setters:[function(n){a=n.r;i=n.h;r=n.H},function(n){t=n.d}],execute:function(){var o=":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out;}details[open] .pds-accordion__body.open{max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";var e=o;var s=n("pds_accordion",function(){function n(n){var i=this;a(this,n);this.handleToggle=function(){i.isOpen=i.detailsEl.open};this.getOpenAttribute=function(){if(i.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}n.prototype.handleOpenState=function(n){this.isOpen=n;if(n===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}};n.prototype.componentDidLoad=function(){this.detailsEl.addEventListener("toggle",this.handleToggle)};n.prototype.render=function(){var n=this;return i(r,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:function(a){return n.detailsEl=a}}),i("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},i("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),i("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:t})),i("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:"pds-accordion__body ".concat(this.isOpen?"open":""),ref:function(a){return n.containerEl=a}},i("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))};Object.defineProperty(n,"watchers",{get:function(){return{isOpen:["handleOpenState"]}},enumerable:false,configurable:true});return n}());s.style=e}}}));
|
|
2
|
-
//# sourceMappingURL=p-452d82a8.system.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","exports","this","handleToggle","_this","isOpen","detailsEl","open","getOpenAttribute","class_1","prototype","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall","concat"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: inset 0 0 0 2px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 1s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: max-content;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"gMAAA,IAAMA,EAAkB,6gGACxB,IAAAC,EAAeD,E,ICWFE,EAAYC,EAAA,2B,mCA+BfC,KAAAC,aAAe,WACrBC,EAAKC,OAASD,EAAKE,UAAUC,I,EAGvBL,KAAAM,iBAAmB,WACzB,GAAIJ,EAAKC,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,E,yCArBY,K,CAGrBE,EAAAC,UAAAC,gBAAA,SAAgBC,GACdV,KAAKG,OAASO,EAEd,GAAKA,IAAa,KAAO,CACvBV,KAAKW,YAAYC,UAAUC,IAAI,O,KAC1B,CACLb,KAAKW,YAAYC,UAAUE,OAAO,O,GAetCP,EAAAC,UAAAO,iBAAA,WACEf,KAAKI,UAAUY,iBAAiB,SAAUhB,KAAKC,a,EAGjDM,EAAAC,UAAAS,OAAA,eAAAf,EAAAF,KACE,OACEkB,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAItB,KAAKuB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAapB,KAAKM,mBAAkB,CAAEoB,IAAK,SAACC,GAAO,OAAAzB,EAAKE,UAAYuB,CAAjB,IACjDT,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,KAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAAU,OAAuB/B,KAAKG,OAAS,OAAS,IAAMuB,IAAK,SAACC,GAAO,OAAAzB,EAAKS,YAAcgB,CAAnB,GAC3ET,EAAA,QAAAE,IAAA,+C,uIAvDa,I"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as a,h as n,H as i}from"./p-e74f35bd.js";import{d as r}from"./p-450da80f.js";const t=":host{display:block}details{--animation-transform-timing:200ms;--border-radius:var(--pine-spacing-xs);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out;}details[open] .pds-accordion__body.open{max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{max-height:0;overflow:hidden}";const o=t;const s=class{constructor(n){a(this,n);this.handleToggle=()=>{this.isOpen=this.detailsEl.open};this.getOpenAttribute=()=>{if(this.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}handleOpenState(a){this.isOpen=a;if(a===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}}componentDidLoad(){this.detailsEl.addEventListener("toggle",this.handleToggle)}render(){return n(i,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},n("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:a=>this.detailsEl=a}),n("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},n("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),n("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:r})),n("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:`pds-accordion__body ${this.isOpen?"open":""}`,ref:a=>this.containerEl=a},n("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))}static get watchers(){return{isOpen:["handleOpenState"]}}};s.style=o;export{s as pds_accordion};
|
|
2
|
-
//# sourceMappingURL=p-722c93b9.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","isOpen","detailsEl","open","getOpenAttribute","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n --border-radius: var(--pine-spacing-xs);\n --box-shadow-focus: inset 0 0 0 2px var(--pine-color-primary-200);\n --color-content-background: var(--pine-base-color-white);\n --color-background-hover: var(--pine-color-neutral-grey-300);\n --color-font: var(--pine-color-neutral-charcoal-200);\n --color-font-active: var(--pine-color-neutral-charcoal-500);\n --color-font-hover: var(--pine-color-neutral-charcoal-300);\n --font-weight: var(--pine-font-weight-semibold);\n --spacing-details-padding-inline: 12px;\n --spacing-summary-padding-block: var(--pine-spacing-xxs);\n --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n border-radius: var(--border-radius);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-font-active);\n font-weight: var(--font-weight);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 1s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: max-content;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius);\n color: var(--color-font);\n font-weight: var(--font-weight);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-font-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAkB,6gGACxB,MAAAC,EAAeD,E,MCWFE,EAAY,M,yBA+BfC,KAAAC,aAAe,KACrBD,KAAKE,OAASF,KAAKG,UAAUC,IAAI,EAG3BJ,KAAAK,iBAAmB,KACzB,GAAIL,KAAKE,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,EAAE,E,uCArBU,K,CAGrB,eAAAE,CAAgBC,GACdP,KAAKE,OAASK,EAEd,GAAKA,IAAa,KAAO,CACvBP,KAAKQ,YAAYC,UAAUC,IAAI,O,KAC1B,CACLV,KAAKQ,YAAYC,UAAUE,OAAO,O,EAetC,gBAAAC,GACEZ,KAAKG,UAAUU,iBAAiB,SAAUb,KAAKC,a,CAGjD,MAAAa,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAInB,KAAKoB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAajB,KAAKK,mBAAkB,CAAEkB,IAAMC,GAAOxB,KAAKG,UAAYqB,IAClET,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,KAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAuBlB,KAAKE,OAAS,OAAS,KAAMqB,IAAMC,GAAOxB,KAAKQ,YAAcgB,GAC9FT,EAAA,QAAAE,IAAA,+C"}
|