@pine-ds/core 4.7.0 → 4.7.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-box2.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-combobox.js +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-drawer.js +1 -1
- package/components/pds-dropdown-menu-item.js +1 -1
- package/components/pds-modal2.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-switch.js +1 -1
- package/components/pds-table-cell2.js +1 -1
- package/components/pds-text2.js +1 -1
- package/components/truncation-tooltip.js +1 -1
- package/dist/cjs/pds-box.cjs.entry.js +96 -96
- package/dist/cjs/pds-checkbox.cjs.entry.js +16 -4
- package/dist/cjs/pds-chip.cjs.entry.js +34 -9
- package/dist/cjs/pds-combobox.cjs.entry.js +16 -3
- package/dist/cjs/pds-copytext.cjs.entry.js +7 -2
- package/dist/cjs/pds-drawer.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +2 -2
- package/dist/cjs/pds-modal.cjs.entry.js +62 -21
- package/dist/cjs/pds-multiselect.cjs.entry.js +37 -7
- package/dist/cjs/pds-radio.cjs.entry.js +1 -1
- package/dist/cjs/pds-row.cjs.entry.js +7 -7
- package/dist/cjs/pds-switch.cjs.entry.js +15 -3
- package/dist/cjs/pds-table-cell.cjs.entry.js +24 -4
- package/dist/cjs/pds-text.cjs.entry.js +17 -9
- package/dist/cjs/{truncation-tooltip-CYgQfBLt.js → truncation-tooltip-DO9xli2e.js} +7 -7
- package/dist/collection/components/pds-box/pds-box.js +96 -96
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +4 -0
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +15 -3
- package/dist/collection/components/pds-chip/pds-chip.js +33 -8
- package/dist/collection/components/pds-chip/stories/pds-chip.stories.js +17 -0
- package/dist/collection/components/pds-combobox/pds-combobox.js +17 -4
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.js +6 -1
- package/dist/collection/components/pds-drawer/pds-drawer.css +4 -0
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +2 -2
- package/dist/collection/components/pds-modal/pds-modal.js +66 -21
- package/dist/collection/components/pds-multiselect/pds-multiselect.css +4 -0
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +37 -7
- package/dist/collection/components/pds-radio/pds-radio.css +6 -0
- package/dist/collection/components/pds-row/pds-row.js +7 -7
- package/dist/collection/components/pds-switch/pds-switch.js +15 -3
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +23 -3
- package/dist/collection/components/pds-text/pds-text.js +16 -8
- package/dist/collection/utils/truncation-tooltip.js +7 -7
- package/dist/docs.json +7 -3
- package/dist/esm/pds-box.entry.js +96 -96
- package/dist/esm/pds-checkbox.entry.js +16 -4
- package/dist/esm/pds-chip.entry.js +34 -9
- package/dist/esm/pds-combobox.entry.js +16 -3
- package/dist/esm/pds-copytext.entry.js +7 -2
- package/dist/esm/pds-drawer.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu-item.entry.js +2 -2
- package/dist/esm/pds-modal.entry.js +62 -21
- package/dist/esm/pds-multiselect.entry.js +37 -7
- package/dist/esm/pds-radio.entry.js +1 -1
- package/dist/esm/pds-row.entry.js +7 -7
- package/dist/esm/pds-switch.entry.js +15 -3
- package/dist/esm/pds-table-cell.entry.js +24 -4
- package/dist/esm/pds-text.entry.js +17 -9
- package/dist/esm/{truncation-tooltip-_902ENWC.js → truncation-tooltip-DRXsdKk1.js} +7 -7
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-drawer.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/truncation-tooltip-DRXsdKk1.js +1 -0
- package/dist/pine-core/{p-9af131d6.system.entry.js → p-11d98408.system.entry.js} +1 -1
- package/dist/pine-core/p-1dc5a7e0.system.entry.js +1 -0
- package/dist/pine-core/p-355e4cf9.entry.js +1 -0
- package/dist/pine-core/p-4435fff6.system.entry.js +1 -0
- package/dist/pine-core/p-576cf904.system.entry.js +1 -0
- package/dist/pine-core/{p-4f94b4f1.system.entry.js → p-645a482b.system.entry.js} +1 -1
- package/dist/pine-core/{p-4fa63723.system.entry.js → p-6d603d16.system.entry.js} +1 -1
- package/dist/pine-core/p-7fa66cad.entry.js +1 -0
- package/dist/pine-core/p-80a698ae.entry.js +1 -0
- package/dist/pine-core/{p-bf7ee3b7.system.entry.js → p-80e6f3a0.system.entry.js} +1 -1
- package/dist/pine-core/p-88ff1604.entry.js +1 -0
- package/dist/pine-core/p-9713fb36.entry.js +1 -0
- package/dist/pine-core/{p-6eec23a7.system.entry.js → p-97d0b89e.system.entry.js} +1 -1
- package/dist/pine-core/p-993d1043.entry.js +1 -0
- package/dist/pine-core/p-CuSNnuFu.system.js +1 -1
- package/dist/pine-core/p-JtdHT_W5.js +1 -0
- package/dist/pine-core/p-a939b471.entry.js +1 -0
- package/dist/pine-core/p-aa032a5e.system.entry.js +1 -0
- package/dist/pine-core/p-bb73ad66.entry.js +2 -0
- package/dist/pine-core/p-bd26a5e8.entry.js +1 -0
- package/dist/pine-core/p-c36b490e.entry.js +1 -0
- package/dist/pine-core/p-c81d8ac8.entry.js +1 -0
- package/dist/pine-core/p-ca0a8f5c.entry.js +1 -0
- package/dist/pine-core/p-ca0d48e8.entry.js +1 -0
- package/dist/pine-core/p-cfc52b95.system.entry.js +1 -0
- package/dist/pine-core/{p-ba1f65c2.system.entry.js → p-d8570b4b.system.entry.js} +1 -1
- package/dist/pine-core/{p-9e0f920a.system.entry.js → p-e7a95a49.system.entry.js} +1 -1
- package/dist/pine-core/p-e803f629.system.entry.js +1 -0
- package/dist/pine-core/{p-5a10784e.system.entry.js → p-e836f3ec.system.entry.js} +2 -2
- package/dist/pine-core/{p-b8e8a4ce.entry.js → p-f474d7de.entry.js} +1 -1
- package/dist/pine-core/{p-CBu9UrXr.system.js → p-qhdoK1Jp.system.js} +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-checkbox/pds-checkbox.d.ts +4 -0
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +6 -1
- package/dist/types/components/pds-modal/pds-modal.d.ts +6 -0
- package/dist/types/components/pds-multiselect/pds-multiselect.d.ts +8 -2
- package/dist/types/components/pds-switch/pds-switch.d.ts +4 -0
- package/dist/types/components/pds-table/pds-table-cell/pds-table-cell.d.ts +3 -0
- package/dist/types/components/pds-text/pds-text.d.ts +1 -0
- package/dist/types/components.d.ts +2 -2
- package/dist/types/utils/truncation-tooltip.d.ts +15 -2
- package/hydrate/index.js +338 -172
- package/hydrate/index.mjs +338 -172
- package/package.json +2 -2
- package/dist/esm-es5/truncation-tooltip-_902ENWC.js +0 -1
- package/dist/pine-core/p-21fe6ee1.system.entry.js +0 -1
- package/dist/pine-core/p-24fbbb74.system.entry.js +0 -1
- package/dist/pine-core/p-258d5e83.entry.js +0 -1
- package/dist/pine-core/p-4849fda7.entry.js +0 -1
- package/dist/pine-core/p-4de8f333.entry.js +0 -1
- package/dist/pine-core/p-550c2fd3.entry.js +0 -1
- package/dist/pine-core/p-6bf853c9.entry.js +0 -1
- package/dist/pine-core/p-6d3610f9.entry.js +0 -1
- package/dist/pine-core/p-74a05bcc.entry.js +0 -1
- package/dist/pine-core/p-84e9b7da.entry.js +0 -1
- package/dist/pine-core/p-945fb0b1.entry.js +0 -1
- package/dist/pine-core/p-CnM3cCof.js +0 -1
- package/dist/pine-core/p-a0344e30.entry.js +0 -2
- package/dist/pine-core/p-a85a6ab9.system.entry.js +0 -1
- package/dist/pine-core/p-bf5887e8.system.entry.js +0 -1
- package/dist/pine-core/p-cf08a6dd.system.entry.js +0 -1
- package/dist/pine-core/p-e21ff692.entry.js +0 -1
- package/dist/pine-core/p-e800a2b1.entry.js +0 -1
- package/dist/pine-core/p-eb5465ce.entry.js +0 -1
- package/dist/pine-core/p-f25e4731.system.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -6451,18 +6451,18 @@ class PdsBox {
|
|
|
6451
6451
|
}
|
|
6452
6452
|
render() {
|
|
6453
6453
|
const boxClasses = `
|
|
6454
|
-
${this.alignItems
|
|
6455
|
-
${this.alignItemsXs
|
|
6456
|
-
${this.alignItemsSm
|
|
6457
|
-
${this.alignItemsMd
|
|
6458
|
-
${this.alignItemsLg
|
|
6459
|
-
${this.alignItemsXl
|
|
6460
|
-
${this.alignSelf
|
|
6461
|
-
${this.alignSelfXs
|
|
6462
|
-
${this.alignSelfSm
|
|
6463
|
-
${this.alignSelfMd
|
|
6464
|
-
${this.alignSelfLg
|
|
6465
|
-
${this.alignSelfXl
|
|
6454
|
+
${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
|
|
6455
|
+
${this.alignItemsXs != null && this.alignItemsXs.trim() !== '' ? `pds-align-items-xs-${this.alignItemsXs}` : ''}
|
|
6456
|
+
${this.alignItemsSm != null && this.alignItemsSm.trim() !== '' ? `pds-align-items-sm-${this.alignItemsSm}` : ''}
|
|
6457
|
+
${this.alignItemsMd != null && this.alignItemsMd.trim() !== '' ? `pds-align-items-md-${this.alignItemsMd}` : ''}
|
|
6458
|
+
${this.alignItemsLg != null && this.alignItemsLg.trim() !== '' ? `pds-align-items-lg-${this.alignItemsLg}` : ''}
|
|
6459
|
+
${this.alignItemsXl != null && this.alignItemsXl.trim() !== '' ? `pds-align-items-xl-${this.alignItemsXl}` : ''}
|
|
6460
|
+
${this.alignSelf != null && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}
|
|
6461
|
+
${this.alignSelfXs != null && this.alignSelfXs.trim() !== '' ? `pds-align-self-xs-${this.alignSelfXs}` : ''}
|
|
6462
|
+
${this.alignSelfSm != null && this.alignSelfSm.trim() !== '' ? `pds-align-self-sm-${this.alignSelfSm}` : ''}
|
|
6463
|
+
${this.alignSelfMd != null && this.alignSelfMd.trim() !== '' ? `pds-align-self-md-${this.alignSelfMd}` : ''}
|
|
6464
|
+
${this.alignSelfLg != null && this.alignSelfLg.trim() !== '' ? `pds-align-self-lg-${this.alignSelfLg}` : ''}
|
|
6465
|
+
${this.alignSelfXl != null && this.alignSelfXl.trim() !== '' ? `pds-align-self-xl-${this.alignSelfXl}` : ''}
|
|
6466
6466
|
${this.auto ? 'pds-box--auto' : ''}
|
|
6467
6467
|
${this.autoXs ? 'pds-box--auto-xs' : ''}
|
|
6468
6468
|
${this.autoSm ? 'pds-box--auto-sm' : ''}
|
|
@@ -6478,101 +6478,101 @@ class PdsBox {
|
|
|
6478
6478
|
${this.borderInlineStart === false ? 'pds-box--border-inline-start-none' : ''}
|
|
6479
6479
|
${this.borderInlineEnd === true ? 'pds-box--border-inline-end' : ''}
|
|
6480
6480
|
${this.borderInlineEnd === false ? 'pds-box--border-inline-end-none' : ''}
|
|
6481
|
-
${this.borderRadius
|
|
6482
|
-
${this.direction
|
|
6483
|
-
${this.display
|
|
6481
|
+
${this.borderRadius != null && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
|
|
6482
|
+
${this.direction != null && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
|
|
6483
|
+
${this.display != null && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
|
|
6484
6484
|
${this.fit ? 'pds-box--fit' : ''}
|
|
6485
6485
|
${this.fitXs ? 'pds-box--fit-xs' : ''}
|
|
6486
6486
|
${this.fitSm ? 'pds-box--fit-sm' : ''}
|
|
6487
6487
|
${this.fitMd ? 'pds-box--fit-md' : ''}
|
|
6488
6488
|
${this.fitLg ? 'pds-box--fit-lg' : ''}
|
|
6489
6489
|
${this.fitXl ? 'pds-box--fit-xl' : ''}
|
|
6490
|
-
${this.gap
|
|
6491
|
-
${this.gapXs
|
|
6492
|
-
${this.gapSm
|
|
6493
|
-
${this.gapMd
|
|
6494
|
-
${this.gapLg
|
|
6495
|
-
${this.gapXl
|
|
6490
|
+
${this.gap != null && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
|
|
6491
|
+
${this.gapXs != null && this.gapXs.trim() !== '' ? `pds-box-gap-xs-${this.gapXs}` : ''}
|
|
6492
|
+
${this.gapSm != null && this.gapSm.trim() !== '' ? `pds-box-gap-sm-${this.gapSm}` : ''}
|
|
6493
|
+
${this.gapMd != null && this.gapMd.trim() !== '' ? `pds-box-gap-md-${this.gapMd}` : ''}
|
|
6494
|
+
${this.gapLg != null && this.gapLg.trim() !== '' ? `pds-box-gap-lg-${this.gapLg}` : ''}
|
|
6495
|
+
${this.gapXl != null && this.gapXl.trim() !== '' ? `pds-box-gap-xl-${this.gapXl}` : ''}
|
|
6496
6496
|
${this.wrap ? 'pds-box--wrap' : ''}
|
|
6497
6497
|
${this.wrapXs ? 'pds-box--wrap-xs' : ''}
|
|
6498
6498
|
${this.wrapSm ? 'pds-box--wrap-sm' : ''}
|
|
6499
6499
|
${this.wrapMd ? 'pds-box--wrap-md' : ''}
|
|
6500
6500
|
${this.wrapLg ? 'pds-box--wrap-lg' : ''}
|
|
6501
6501
|
${this.wrapXl ? 'pds-box--wrap-xl' : ''}
|
|
6502
|
-
${this.flex
|
|
6503
|
-
${this.justifyContent
|
|
6504
|
-
${this.justifyContentXs
|
|
6505
|
-
${this.justifyContentSm
|
|
6506
|
-
${this.justifyContentMd
|
|
6507
|
-
${this.justifyContentLg
|
|
6508
|
-
${this.justifyContentXl
|
|
6509
|
-
${this.marginBlockStart
|
|
6510
|
-
${this.marginBlockStartXs
|
|
6511
|
-
${this.marginBlockStartSm
|
|
6512
|
-
${this.marginBlockStartMd
|
|
6513
|
-
${this.marginBlockStartLg
|
|
6514
|
-
${this.marginBlockStartXl
|
|
6515
|
-
${this.marginInlineStart
|
|
6516
|
-
${this.marginInlineStartXs
|
|
6517
|
-
${this.marginInlineStartSm
|
|
6518
|
-
${this.marginInlineStartMd
|
|
6519
|
-
${this.marginInlineStartLg
|
|
6520
|
-
${this.marginInlineStartXl
|
|
6521
|
-
${this.marginInlineEnd
|
|
6522
|
-
${this.marginInlineEndXs
|
|
6523
|
-
${this.marginInlineEndSm
|
|
6524
|
-
${this.marginInlineEndMd
|
|
6525
|
-
${this.marginInlineEndLg
|
|
6526
|
-
${this.marginInlineEndXl
|
|
6527
|
-
${this.marginBlockEnd
|
|
6528
|
-
${this.marginBlockEndXs
|
|
6529
|
-
${this.marginBlockEndSm
|
|
6530
|
-
${this.marginBlockEndMd
|
|
6531
|
-
${this.marginBlockEndLg
|
|
6532
|
-
${this.marginBlockEndXl
|
|
6533
|
-
${this.offset
|
|
6534
|
-
${this.offsetXs
|
|
6535
|
-
${this.offsetSm
|
|
6536
|
-
${this.offsetMd
|
|
6537
|
-
${this.offsetLg
|
|
6538
|
-
${this.offsetXl
|
|
6539
|
-
${this.padding
|
|
6540
|
-
${this.paddingXs
|
|
6541
|
-
${this.paddingSm
|
|
6542
|
-
${this.paddingMd
|
|
6543
|
-
${this.paddingLg
|
|
6544
|
-
${this.paddingXl
|
|
6545
|
-
${this.paddingBlockStart
|
|
6546
|
-
${this.paddingBlockStartXs
|
|
6547
|
-
${this.paddingBlockStartSm
|
|
6548
|
-
${this.paddingBlockStartMd
|
|
6549
|
-
${this.paddingBlockStartLg
|
|
6550
|
-
${this.paddingBlockStartXl
|
|
6551
|
-
${this.paddingBlockEnd
|
|
6552
|
-
${this.paddingBlockEndXs
|
|
6553
|
-
${this.paddingBlockEndSm
|
|
6554
|
-
${this.paddingBlockEndMd
|
|
6555
|
-
${this.paddingBlockEndLg
|
|
6556
|
-
${this.paddingBlockEndXl
|
|
6557
|
-
${this.paddingInlineStart
|
|
6558
|
-
${this.paddingInlineStartXs
|
|
6559
|
-
${this.paddingInlineStartSm
|
|
6560
|
-
${this.paddingInlineStartMd
|
|
6561
|
-
${this.paddingInlineStartLg
|
|
6562
|
-
${this.paddingInlineStartXl
|
|
6563
|
-
${this.paddingInlineEnd
|
|
6564
|
-
${this.paddingInlineEndXs
|
|
6565
|
-
${this.paddingInlineEndSm
|
|
6566
|
-
${this.paddingInlineEndMd
|
|
6567
|
-
${this.paddingInlineEndLg
|
|
6568
|
-
${this.paddingInlineEndXl
|
|
6569
|
-
${this.shadow
|
|
6570
|
-
${this.size
|
|
6571
|
-
${this.sizeXs
|
|
6572
|
-
${this.sizeSm
|
|
6573
|
-
${this.sizeMd
|
|
6574
|
-
${this.sizeLg
|
|
6575
|
-
${this.sizeXl
|
|
6502
|
+
${this.flex != null && this.flex.trim() !== '' && ['none', 'grow', 'shrink'].includes(this.flex) ? `pds-box--flex-${this.flex}` : ''}
|
|
6503
|
+
${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
|
|
6504
|
+
${this.justifyContentXs != null && this.justifyContentXs.trim() !== '' ? `pds-justify-content-xs-${this.justifyContentXs}` : ''}
|
|
6505
|
+
${this.justifyContentSm != null && this.justifyContentSm.trim() !== '' ? `pds-justify-content-sm-${this.justifyContentSm}` : ''}
|
|
6506
|
+
${this.justifyContentMd != null && this.justifyContentMd.trim() !== '' ? `pds-justify-content-md-${this.justifyContentMd}` : ''}
|
|
6507
|
+
${this.justifyContentLg != null && this.justifyContentLg.trim() !== '' ? `pds-justify-content-lg-${this.justifyContentLg}` : ''}
|
|
6508
|
+
${this.justifyContentXl != null && this.justifyContentXl.trim() !== '' ? `pds-justify-content-xl-${this.justifyContentXl}` : ''}
|
|
6509
|
+
${this.marginBlockStart != null && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}
|
|
6510
|
+
${this.marginBlockStartXs != null && this.marginBlockStartXs.trim() !== '' ? `pds-margin-block-start-xs-${this.marginBlockStartXs}` : ''}
|
|
6511
|
+
${this.marginBlockStartSm != null && this.marginBlockStartSm.trim() !== '' ? `pds-margin-block-start-sm-${this.marginBlockStartSm}` : ''}
|
|
6512
|
+
${this.marginBlockStartMd != null && this.marginBlockStartMd.trim() !== '' ? `pds-margin-block-start-md-${this.marginBlockStartMd}` : ''}
|
|
6513
|
+
${this.marginBlockStartLg != null && this.marginBlockStartLg.trim() !== '' ? `pds-margin-block-start-lg-${this.marginBlockStartLg}` : ''}
|
|
6514
|
+
${this.marginBlockStartXl != null && this.marginBlockStartXl.trim() !== '' ? `pds-margin-block-start-xl-${this.marginBlockStartXl}` : ''}
|
|
6515
|
+
${this.marginInlineStart != null && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}
|
|
6516
|
+
${this.marginInlineStartXs != null && this.marginInlineStartXs.trim() !== '' ? `pds-margin-inline-start-xs-${this.marginInlineStartXs}` : ''}
|
|
6517
|
+
${this.marginInlineStartSm != null && this.marginInlineStartSm.trim() !== '' ? `pds-margin-inline-start-sm-${this.marginInlineStartSm}` : ''}
|
|
6518
|
+
${this.marginInlineStartMd != null && this.marginInlineStartMd.trim() !== '' ? `pds-margin-inline-start-md-${this.marginInlineStartMd}` : ''}
|
|
6519
|
+
${this.marginInlineStartLg != null && this.marginInlineStartLg.trim() !== '' ? `pds-margin-inline-start-lg-${this.marginInlineStartLg}` : ''}
|
|
6520
|
+
${this.marginInlineStartXl != null && this.marginInlineStartXl.trim() !== '' ? `pds-margin-inline-start-xl-${this.marginInlineStartXl}` : ''}
|
|
6521
|
+
${this.marginInlineEnd != null && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}
|
|
6522
|
+
${this.marginInlineEndXs != null && this.marginInlineEndXs.trim() !== '' ? `pds-margin-inline-end-xs-${this.marginInlineEndXs}` : ''}
|
|
6523
|
+
${this.marginInlineEndSm != null && this.marginInlineEndSm.trim() !== '' ? `pds-margin-inline-end-sm-${this.marginInlineEndSm}` : ''}
|
|
6524
|
+
${this.marginInlineEndMd != null && this.marginInlineEndMd.trim() !== '' ? `pds-margin-inline-end-md-${this.marginInlineEndMd}` : ''}
|
|
6525
|
+
${this.marginInlineEndLg != null && this.marginInlineEndLg.trim() !== '' ? `pds-margin-inline-end-lg-${this.marginInlineEndLg}` : ''}
|
|
6526
|
+
${this.marginInlineEndXl != null && this.marginInlineEndXl.trim() !== '' ? `pds-margin-inline-end-xl-${this.marginInlineEndXl}` : ''}
|
|
6527
|
+
${this.marginBlockEnd != null && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}
|
|
6528
|
+
${this.marginBlockEndXs != null && this.marginBlockEndXs.trim() !== '' ? `pds-margin-block-end-xs-${this.marginBlockEndXs}` : ''}
|
|
6529
|
+
${this.marginBlockEndSm != null && this.marginBlockEndSm.trim() !== '' ? `pds-margin-block-end-sm-${this.marginBlockEndSm}` : ''}
|
|
6530
|
+
${this.marginBlockEndMd != null && this.marginBlockEndMd.trim() !== '' ? `pds-margin-block-end-md-${this.marginBlockEndMd}` : ''}
|
|
6531
|
+
${this.marginBlockEndLg != null && this.marginBlockEndLg.trim() !== '' ? `pds-margin-block-end-lg-${this.marginBlockEndLg}` : ''}
|
|
6532
|
+
${this.marginBlockEndXl != null && this.marginBlockEndXl.trim() !== '' ? `pds-margin-block-end-xl-${this.marginBlockEndXl}` : ''}
|
|
6533
|
+
${this.offset != null && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
|
|
6534
|
+
${this.offsetXs != null && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
|
|
6535
|
+
${this.offsetSm != null && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
|
|
6536
|
+
${this.offsetMd != null && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}
|
|
6537
|
+
${this.offsetLg != null && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
|
|
6538
|
+
${this.offsetXl != null && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
|
|
6539
|
+
${this.padding != null && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
|
|
6540
|
+
${this.paddingXs != null && this.paddingXs.trim() !== '' ? `pds-padding-xs-${this.paddingXs}` : ''}
|
|
6541
|
+
${this.paddingSm != null && this.paddingSm.trim() !== '' ? `pds-padding-sm-${this.paddingSm}` : ''}
|
|
6542
|
+
${this.paddingMd != null && this.paddingMd.trim() !== '' ? `pds-padding-md-${this.paddingMd}` : ''}
|
|
6543
|
+
${this.paddingLg != null && this.paddingLg.trim() !== '' ? `pds-padding-lg-${this.paddingLg}` : ''}
|
|
6544
|
+
${this.paddingXl != null && this.paddingXl.trim() !== '' ? `pds-padding-xl-${this.paddingXl}` : ''}
|
|
6545
|
+
${this.paddingBlockStart != null && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}
|
|
6546
|
+
${this.paddingBlockStartXs != null && this.paddingBlockStartXs.trim() !== '' ? `pds-padding-block-start-xs-${this.paddingBlockStartXs}` : ''}
|
|
6547
|
+
${this.paddingBlockStartSm != null && this.paddingBlockStartSm.trim() !== '' ? `pds-padding-block-start-sm-${this.paddingBlockStartSm}` : ''}
|
|
6548
|
+
${this.paddingBlockStartMd != null && this.paddingBlockStartMd.trim() !== '' ? `pds-padding-block-start-md-${this.paddingBlockStartMd}` : ''}
|
|
6549
|
+
${this.paddingBlockStartLg != null && this.paddingBlockStartLg.trim() !== '' ? `pds-padding-block-start-lg-${this.paddingBlockStartLg}` : ''}
|
|
6550
|
+
${this.paddingBlockStartXl != null && this.paddingBlockStartXl.trim() !== '' ? `pds-padding-block-start-xl-${this.paddingBlockStartXl}` : ''}
|
|
6551
|
+
${this.paddingBlockEnd != null && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}
|
|
6552
|
+
${this.paddingBlockEndXs != null && this.paddingBlockEndXs.trim() !== '' ? `pds-padding-block-end-xs-${this.paddingBlockEndXs}` : ''}
|
|
6553
|
+
${this.paddingBlockEndSm != null && this.paddingBlockEndSm.trim() !== '' ? `pds-padding-block-end-sm-${this.paddingBlockEndSm}` : ''}
|
|
6554
|
+
${this.paddingBlockEndMd != null && this.paddingBlockEndMd.trim() !== '' ? `pds-padding-block-end-md-${this.paddingBlockEndMd}` : ''}
|
|
6555
|
+
${this.paddingBlockEndLg != null && this.paddingBlockEndLg.trim() !== '' ? `pds-padding-block-end-lg-${this.paddingBlockEndLg}` : ''}
|
|
6556
|
+
${this.paddingBlockEndXl != null && this.paddingBlockEndXl.trim() !== '' ? `pds-padding-block-end-xl-${this.paddingBlockEndXl}` : ''}
|
|
6557
|
+
${this.paddingInlineStart != null && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}
|
|
6558
|
+
${this.paddingInlineStartXs != null && this.paddingInlineStartXs.trim() !== '' ? `pds-padding-inline-start-xs-${this.paddingInlineStartXs}` : ''}
|
|
6559
|
+
${this.paddingInlineStartSm != null && this.paddingInlineStartSm.trim() !== '' ? `pds-padding-inline-start-sm-${this.paddingInlineStartSm}` : ''}
|
|
6560
|
+
${this.paddingInlineStartMd != null && this.paddingInlineStartMd.trim() !== '' ? `pds-padding-inline-start-md-${this.paddingInlineStartMd}` : ''}
|
|
6561
|
+
${this.paddingInlineStartLg != null && this.paddingInlineStartLg.trim() !== '' ? `pds-padding-inline-start-lg-${this.paddingInlineStartLg}` : ''}
|
|
6562
|
+
${this.paddingInlineStartXl != null && this.paddingInlineStartXl.trim() !== '' ? `pds-padding-inline-start-xl-${this.paddingInlineStartXl}` : ''}
|
|
6563
|
+
${this.paddingInlineEnd != null && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}
|
|
6564
|
+
${this.paddingInlineEndXs != null && this.paddingInlineEndXs.trim() !== '' ? `pds-padding-inline-end-xs-${this.paddingInlineEndXs}` : ''}
|
|
6565
|
+
${this.paddingInlineEndSm != null && this.paddingInlineEndSm.trim() !== '' ? `pds-padding-inline-end-sm-${this.paddingInlineEndSm}` : ''}
|
|
6566
|
+
${this.paddingInlineEndMd != null && this.paddingInlineEndMd.trim() !== '' ? `pds-padding-inline-end-md-${this.paddingInlineEndMd}` : ''}
|
|
6567
|
+
${this.paddingInlineEndLg != null && this.paddingInlineEndLg.trim() !== '' ? `pds-padding-inline-end-lg-${this.paddingInlineEndLg}` : ''}
|
|
6568
|
+
${this.paddingInlineEndXl != null && this.paddingInlineEndXl.trim() !== '' ? `pds-padding-inline-end-xl-${this.paddingInlineEndXl}` : ''}
|
|
6569
|
+
${this.shadow != null && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
|
|
6570
|
+
${this.size != null && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
|
|
6571
|
+
${this.sizeXs != null && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
|
|
6572
|
+
${this.sizeSm != null && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}
|
|
6573
|
+
${this.sizeMd != null && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}
|
|
6574
|
+
${this.sizeLg != null && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}
|
|
6575
|
+
${this.sizeXl != null && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}
|
|
6576
6576
|
${this.size == undefined &&
|
|
6577
6577
|
this.sizeSm == undefined &&
|
|
6578
6578
|
this.sizeMd == undefined &&
|
|
@@ -6584,7 +6584,7 @@ class PdsBox {
|
|
|
6584
6584
|
const normalizedBorder = normalizeColorValue$1(this.borderColor);
|
|
6585
6585
|
const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
|
|
6586
6586
|
this.hostKeeper.record(boxClasses, boxInlineStyles);
|
|
6587
|
-
return (hAsync(Host, { key: '
|
|
6587
|
+
return (hAsync(Host, { key: '8a1348247b5a4c546759232f0f155721798797e5', class: boxClasses, style: boxInlineStyles }));
|
|
6588
6588
|
}
|
|
6589
6589
|
get el() { return getElement(this); }
|
|
6590
6590
|
static get style() { return pdsBoxCss(); }
|
|
@@ -7068,7 +7068,7 @@ const isSpecTest = () => {
|
|
|
7068
7068
|
|
|
7069
7069
|
const labelCss$5 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
7070
7070
|
|
|
7071
|
-
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}`;
|
|
7071
|
+
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}`;
|
|
7072
7072
|
|
|
7073
7073
|
/**
|
|
7074
7074
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -7168,6 +7168,18 @@ class PdsCheckbox {
|
|
|
7168
7168
|
this.checked = state === (this.value || 'on');
|
|
7169
7169
|
}
|
|
7170
7170
|
}
|
|
7171
|
+
/**
|
|
7172
|
+
* Form Associated Custom Elements API: Called when the form is disabled
|
|
7173
|
+
*/
|
|
7174
|
+
formDisabledCallback(disabled) {
|
|
7175
|
+
// Also fires when this element's own `disabled` attribute is merely present, even as the
|
|
7176
|
+
// literal string "false" (a consumer's or React's attribute serialization can write that) —
|
|
7177
|
+
// the platform treats any value as disabled, independent of fieldset state. A real disabled
|
|
7178
|
+
// fieldset ancestor confirms this is genuinely that, not this element's own attribute.
|
|
7179
|
+
if (disabled && !this.el.closest('fieldset[disabled]'))
|
|
7180
|
+
return;
|
|
7181
|
+
this.disabled = disabled;
|
|
7182
|
+
}
|
|
7171
7183
|
componentWillLoad() {
|
|
7172
7184
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
7173
7185
|
this.updateHasLabelSlot();
|
|
@@ -7175,9 +7187,9 @@ class PdsCheckbox {
|
|
|
7175
7187
|
render() {
|
|
7176
7188
|
const hostClass = this.classNames();
|
|
7177
7189
|
this.hostKeeper.record(hostClass);
|
|
7178
|
-
return (hAsync(Host, { key: '
|
|
7179
|
-
hAsync("div", { key: '
|
|
7180
|
-
hAsync("div", { key: '
|
|
7190
|
+
return (hAsync(Host, { key: 'bbe09a5e9eb55f62b2921b09a04ddc9476a871ae', class: hostClass }, hAsync("label", { key: 'fa1856d9306eb8c0c19618ea5e2619ea20c3c51d', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8537d97a8e69a17d0d563306dac179e393885dda', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), hAsync("span", { key: 'e523922889c80a2d18243cb560cd855bab95803d', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: 'b6ff34ecbc346d254a0211bfa610823feedb486b', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
7191
|
+
hAsync("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
7192
|
+
hAsync("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '10f7efe5d4b252d9dea6f398eff973ba32506898', icon: danger, size: "small" }), this.errorMessage)));
|
|
7181
7193
|
}
|
|
7182
7194
|
static get formAssociated() { return true; }
|
|
7183
7195
|
get el() { return getElement(this); }
|
|
@@ -8988,7 +9000,7 @@ function isOverflowing(el) {
|
|
|
8988
9000
|
* @returns A cleanup function that removes all listeners, observers, and DOM elements.
|
|
8989
9001
|
*/
|
|
8990
9002
|
function setupTruncationTooltip(options) {
|
|
8991
|
-
const { hostEl, contentEl, getTooltipText, placement = 'top', manageTabIndex = true } = options;
|
|
9003
|
+
const { hostEl, contentEl, getTooltipText, placement = 'top', reference = hostEl, manageTabIndex = true, focusEl = hostEl } = options;
|
|
8992
9004
|
injectStyles();
|
|
8993
9005
|
let portalEl = null;
|
|
8994
9006
|
let isHovering = false;
|
|
@@ -9083,7 +9095,7 @@ function setupTruncationTooltip(options) {
|
|
|
9083
9095
|
if (!portalEl)
|
|
9084
9096
|
return;
|
|
9085
9097
|
try {
|
|
9086
|
-
const { x, y } = await computePosition(
|
|
9098
|
+
const { x, y } = await computePosition(reference, portalEl, {
|
|
9087
9099
|
placement,
|
|
9088
9100
|
strategy: 'fixed',
|
|
9089
9101
|
middleware: [offset(4), flip(), shift({ padding: 5 })],
|
|
@@ -9096,7 +9108,7 @@ function setupTruncationTooltip(options) {
|
|
|
9096
9108
|
catch (_a) {
|
|
9097
9109
|
// Fallback: position above the element with bounds checking
|
|
9098
9110
|
if (portalEl) {
|
|
9099
|
-
const rect =
|
|
9111
|
+
const rect = reference.getBoundingClientRect();
|
|
9100
9112
|
const portalRect = portalEl.getBoundingClientRect();
|
|
9101
9113
|
const padding = 5;
|
|
9102
9114
|
// Ensure tooltip stays within viewport bounds
|
|
@@ -9182,8 +9194,8 @@ function setupTruncationTooltip(options) {
|
|
|
9182
9194
|
}
|
|
9183
9195
|
hostEl.addEventListener('mouseenter', handleMouseEnter);
|
|
9184
9196
|
hostEl.addEventListener('mouseleave', handleMouseLeave);
|
|
9185
|
-
|
|
9186
|
-
|
|
9197
|
+
focusEl.addEventListener('focusin', handleFocusIn);
|
|
9198
|
+
focusEl.addEventListener('focusout', handleFocusOut);
|
|
9187
9199
|
// Return cleanup function
|
|
9188
9200
|
return () => {
|
|
9189
9201
|
disposed = true;
|
|
@@ -9203,8 +9215,8 @@ function setupTruncationTooltip(options) {
|
|
|
9203
9215
|
}
|
|
9204
9216
|
hostEl.removeEventListener('mouseenter', handleMouseEnter);
|
|
9205
9217
|
hostEl.removeEventListener('mouseleave', handleMouseLeave);
|
|
9206
|
-
|
|
9207
|
-
|
|
9218
|
+
focusEl.removeEventListener('focusin', handleFocusIn);
|
|
9219
|
+
focusEl.removeEventListener('focusout', handleFocusOut);
|
|
9208
9220
|
removePortal();
|
|
9209
9221
|
};
|
|
9210
9222
|
}
|
|
@@ -9223,6 +9235,26 @@ const SENTIMENT_DOT_COLORS = {
|
|
|
9223
9235
|
success: 'var(--pine-chip-color-success-dot)',
|
|
9224
9236
|
warning: 'var(--pine-chip-color-warning-dot)',
|
|
9225
9237
|
};
|
|
9238
|
+
// Controls a chip can sit inside that already take focus, so a clipped label adds no tab stop of its own.
|
|
9239
|
+
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9240
|
+
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
|
|
9241
|
+
// Beside the listbox and level with the option, so the tooltip never covers the other options.
|
|
9242
|
+
function besideListbox(wrapper) {
|
|
9243
|
+
const option = (wrapper === null || wrapper === void 0 ? void 0 : wrapper.matches('[role="option"]')) ? wrapper : null;
|
|
9244
|
+
const listbox = option === null || option === void 0 ? void 0 : option.closest('[role="listbox"]');
|
|
9245
|
+
if (!option || !listbox)
|
|
9246
|
+
return {};
|
|
9247
|
+
return {
|
|
9248
|
+
placement: 'right',
|
|
9249
|
+
reference: {
|
|
9250
|
+
getBoundingClientRect: () => {
|
|
9251
|
+
const { top, bottom, height } = option.getBoundingClientRect();
|
|
9252
|
+
const { left, right, width } = listbox.getBoundingClientRect();
|
|
9253
|
+
return { x: left, y: top, top, left, bottom, right, width, height };
|
|
9254
|
+
},
|
|
9255
|
+
},
|
|
9256
|
+
};
|
|
9257
|
+
}
|
|
9226
9258
|
/**
|
|
9227
9259
|
* @slot (default) - The chip's label text.
|
|
9228
9260
|
* @part button
|
|
@@ -9263,6 +9295,11 @@ class PdsChip {
|
|
|
9263
9295
|
}
|
|
9264
9296
|
connectedCallback() {
|
|
9265
9297
|
this.hostKeeper.connect(this.el);
|
|
9298
|
+
// A moved chip reconnects without re-rendering, so componentDidRender won't re-bind what
|
|
9299
|
+
// disconnectedCallback tore down. Before the first render there's no label, and it binds there.
|
|
9300
|
+
if (this.maxWidth && this.labelTextEl) {
|
|
9301
|
+
this.initTruncationTooltip();
|
|
9302
|
+
}
|
|
9266
9303
|
}
|
|
9267
9304
|
// Bind (and re-bind) here, not just on load: changing variant/size remounts
|
|
9268
9305
|
// the label span, so the tooltip has to re-attach to the current node or it
|
|
@@ -9287,16 +9324,15 @@ class PdsChip {
|
|
|
9287
9324
|
initTruncationTooltip() {
|
|
9288
9325
|
this.destroyTruncationTooltip();
|
|
9289
9326
|
if (this.labelTextEl) {
|
|
9290
|
-
|
|
9291
|
-
|
|
9292
|
-
contentEl: this.labelTextEl,
|
|
9293
|
-
getTooltipText: () => this.el.textContent || '',
|
|
9327
|
+
const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
|
|
9328
|
+
this.truncationCleanup = setupTruncationTooltip(Object.assign({ hostEl: this.el, contentEl: this.labelTextEl, getTooltipText: () => this.el.textContent || '',
|
|
9294
9329
|
// The dropdown variant's label span already sits inside
|
|
9295
9330
|
// `<button class="pds-chip__button">`, which is already focusable and
|
|
9296
9331
|
// bubbles focusin to the host — a tabindex on the span too would nest
|
|
9297
9332
|
// a second tab stop inside the button.
|
|
9298
|
-
manageTabIndex: this.effectiveVariant !== 'dropdown',
|
|
9299
|
-
|
|
9333
|
+
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper,
|
|
9334
|
+
// A wrapping control sits outside the host, so its focus never reaches the host's listener.
|
|
9335
|
+
focusEl: wrapper !== null && wrapper !== void 0 ? wrapper : this.el }, besideListbox(wrapper)));
|
|
9300
9336
|
this.tooltipBoundEl = this.labelTextEl;
|
|
9301
9337
|
}
|
|
9302
9338
|
}
|
|
@@ -9353,7 +9389,8 @@ class PdsChip {
|
|
|
9353
9389
|
// label span already sits inside `<button class="pds-chip__button">`,
|
|
9354
9390
|
// which is already focusable and bubbles focusin to the host, so
|
|
9355
9391
|
// initTruncationTooltip passes `manageTabIndex: false` there to avoid
|
|
9356
|
-
// nesting a second tab stop inside the button.
|
|
9392
|
+
// nesting a second tab stop inside the button. The same goes for a chip
|
|
9393
|
+
// inside a consumer's own focusable control (FOCUSABLE_WRAPPER).
|
|
9357
9394
|
const chipContent = isDropdown ? (hAsync("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && hAsync("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null)), hAsync("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-chip__label" }, this.icon && hAsync("pds-icon", { class: "pds-chip__icon", part: "icon", icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", part: "dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null))));
|
|
9358
9395
|
return chipContent;
|
|
9359
9396
|
}
|
|
@@ -9427,7 +9464,7 @@ class PdsChip {
|
|
|
9427
9464
|
const hostClass = this.classNames();
|
|
9428
9465
|
const hostStyles = this.hostStyles;
|
|
9429
9466
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9430
|
-
return (hAsync(Host, { key: '
|
|
9467
|
+
return (hAsync(Host, { key: 'f82d84a7f0a4f1c980d47bf75cd4ffeef042607d', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9431
9468
|
}
|
|
9432
9469
|
get el() { return getElement(this); }
|
|
9433
9470
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11787,6 +11824,18 @@ class PdsCombobox {
|
|
|
11787
11824
|
this.internals = this.el.attachInternals();
|
|
11788
11825
|
}
|
|
11789
11826
|
}
|
|
11827
|
+
/**
|
|
11828
|
+
* Form Associated Custom Elements API: Called when the form is disabled
|
|
11829
|
+
*/
|
|
11830
|
+
formDisabledCallback(disabled) {
|
|
11831
|
+
// Also fires when this element's own `disabled` attribute is merely present, even as the
|
|
11832
|
+
// literal string "false" (a consumer's or React's attribute serialization can write that) —
|
|
11833
|
+
// the platform treats any value as disabled, independent of fieldset state. A real disabled
|
|
11834
|
+
// fieldset ancestor confirms this is genuinely that, not this element's own attribute.
|
|
11835
|
+
if (disabled && !this.el.closest('fieldset[disabled]'))
|
|
11836
|
+
return;
|
|
11837
|
+
this.disabled = disabled;
|
|
11838
|
+
}
|
|
11790
11839
|
componentWillLoad() {
|
|
11791
11840
|
this.originalSearchEmitter = this.pdsComboboxSearch;
|
|
11792
11841
|
this.updateOptions();
|
|
@@ -13074,7 +13123,8 @@ class PdsCombobox {
|
|
|
13074
13123
|
return this.selectedOption ? this.selectedOption.value : null;
|
|
13075
13124
|
}
|
|
13076
13125
|
/**
|
|
13077
|
-
* Clears the selected value and resets the component.
|
|
13126
|
+
* Clears the selected value and resets the component. Works while disabled too, as setting a
|
|
13127
|
+
* native control's value from script does.
|
|
13078
13128
|
*/
|
|
13079
13129
|
async clear() {
|
|
13080
13130
|
const hadValue = this.value !== '' || this.displayText !== '';
|
|
@@ -13651,13 +13701,13 @@ class PdsCombobox {
|
|
|
13651
13701
|
]
|
|
13652
13702
|
.filter(Boolean)
|
|
13653
13703
|
.join(' ');
|
|
13654
|
-
return (hAsync(Host, { key: '
|
|
13704
|
+
return (hAsync(Host, { key: 'ead770a3b7ba531a1cfdc6b02aef6d7159481ed0', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '3ca6fd299acd1db8a0e476eee5f7606bc6153625', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '44c72d099c5ccddce18400b9d3c66158f485de05', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
13655
13705
|
this.inputEl = el;
|
|
13656
13706
|
this.triggerEl = el;
|
|
13657
13707
|
}, class: {
|
|
13658
13708
|
'pds-combobox__input': true,
|
|
13659
13709
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13660
|
-
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '
|
|
13710
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '349af9dc6fdae018d4443b178e21b1627fcc85ca', style: { display: 'none' } }, hAsync("slot", { key: '9af42db6d08f148b7d7b5e4b3199f7c9af7699a4', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
13661
13711
|
hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
13662
13712
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13663
13713
|
// same, and opening the group would go unannounced.
|
|
@@ -13855,6 +13905,11 @@ class PdsCopytext {
|
|
|
13855
13905
|
}
|
|
13856
13906
|
connectedCallback() {
|
|
13857
13907
|
this.hostKeeper.connect(this.el);
|
|
13908
|
+
// componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
|
|
13909
|
+
// down. Before the first render there's no valueSpanEl yet, and componentDidLoad binds it.
|
|
13910
|
+
if (this.truncate && this.valueSpanEl) {
|
|
13911
|
+
this.initTruncationTooltip();
|
|
13912
|
+
}
|
|
13858
13913
|
}
|
|
13859
13914
|
restoreBorderDefault(newValue) {
|
|
13860
13915
|
this.border = restoreReflectedDefault(this.el, 'border', newValue, true);
|
|
@@ -13917,7 +13972,7 @@ class PdsCopytext {
|
|
|
13917
13972
|
render() {
|
|
13918
13973
|
const hostClass = this.classNames();
|
|
13919
13974
|
this.hostKeeper.record(hostClass);
|
|
13920
|
-
return (hAsync(Host, { key: '
|
|
13975
|
+
return (hAsync(Host, { key: 'a3517b135fc3e3677e30b6ad5811c1170a819b65', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: '02f56bed02ed3963a3d80a92148d6619a845224a', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '95fd1284e3d227b74dab613eb71f5385c3a0be29', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '21af67a8c9165e56d2d2b0cf19df7c7e3f290c72', "aria-hidden": "true", icon: copy, size: "16px" }))));
|
|
13921
13976
|
}
|
|
13922
13977
|
get el() { return getElement(this); }
|
|
13923
13978
|
static get watchers() { return {
|
|
@@ -16112,7 +16167,7 @@ function unwrapReconnectedContent(container, selector, contentSelector) {
|
|
|
16112
16167
|
}
|
|
16113
16168
|
}
|
|
16114
16169
|
|
|
16115
|
-
const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
|
|
16170
|
+
const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop>*{pointer-events:auto}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
|
|
16116
16171
|
|
|
16117
16172
|
// Known selectors for content Pine components portal out of place rather than
|
|
16118
16173
|
// rendering where they are — pds-tooltip and pds-combobox's dropdown in
|
|
@@ -16821,7 +16876,7 @@ class PdsDropdownMenuItem {
|
|
|
16821
16876
|
});
|
|
16822
16877
|
}
|
|
16823
16878
|
renderElement() {
|
|
16824
|
-
if (this.href
|
|
16879
|
+
if (this.href != null) {
|
|
16825
16880
|
return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
|
|
16826
16881
|
'pds-dropdown-menu-item__content': true,
|
|
16827
16882
|
'has-focus': this.hasFocus
|
|
@@ -16833,7 +16888,7 @@ class PdsDropdownMenuItem {
|
|
|
16833
16888
|
}, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
|
|
16834
16889
|
}
|
|
16835
16890
|
render() {
|
|
16836
|
-
return (hAsync(Host, { key: '
|
|
16891
|
+
return (hAsync(Host, { key: '2d499a06768bdc4b9a34774d16c1f1e10804b3d5', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
|
|
16837
16892
|
}
|
|
16838
16893
|
get host() { return getElement(this); }
|
|
16839
16894
|
static get style() { return pdsDropdownMenuItemCss(); }
|
|
@@ -18611,6 +18666,20 @@ function oneRadioPerGroup(elements) {
|
|
|
18611
18666
|
const stops = new Set(groups.map((radios) => { var _a; return (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0]; }));
|
|
18612
18667
|
return elements.filter((el) => groupedRadio(el) === null || stops.has(el));
|
|
18613
18668
|
}
|
|
18669
|
+
/** The controls Tab reaches in `root`, in order: visible ones, and one radio per group. */
|
|
18670
|
+
function tabbableIn(root) {
|
|
18671
|
+
const found = [];
|
|
18672
|
+
collectTabbable(root, found);
|
|
18673
|
+
// checkVisibility() also drops an element inside a hidden ancestor, whose own computed
|
|
18674
|
+
// display isn't none; such an element can't take focus.
|
|
18675
|
+
const visible = found.filter(el => {
|
|
18676
|
+
if (typeof el.checkVisibility === 'function')
|
|
18677
|
+
return el.checkVisibility({ checkVisibilityCSS: true });
|
|
18678
|
+
const style = window.getComputedStyle(el);
|
|
18679
|
+
return style.display !== 'none' && style.visibility !== 'hidden';
|
|
18680
|
+
});
|
|
18681
|
+
return oneRadioPerGroup(visible);
|
|
18682
|
+
}
|
|
18614
18683
|
/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
|
|
18615
18684
|
function containsComposed(ancestor, node) {
|
|
18616
18685
|
for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
|
|
@@ -18897,17 +18966,7 @@ class PdsModal {
|
|
|
18897
18966
|
updateFocusableElements() {
|
|
18898
18967
|
if (!this.modalRef)
|
|
18899
18968
|
return;
|
|
18900
|
-
this.focusableElements =
|
|
18901
|
-
collectTabbable(this.modalRef, this.focusableElements);
|
|
18902
|
-
// checkVisibility() also drops an element inside a hidden ancestor, whose own computed
|
|
18903
|
-
// display isn't none; such an element can't take focus, so it can't anchor the trap.
|
|
18904
|
-
this.focusableElements = this.focusableElements.filter(el => {
|
|
18905
|
-
if (typeof el.checkVisibility === 'function')
|
|
18906
|
-
return el.checkVisibility({ checkVisibilityCSS: true });
|
|
18907
|
-
const style = window.getComputedStyle(el);
|
|
18908
|
-
return style.display !== 'none' && style.visibility !== 'hidden';
|
|
18909
|
-
});
|
|
18910
|
-
this.focusableElements = oneRadioPerGroup(this.focusableElements);
|
|
18969
|
+
this.focusableElements = tabbableIn(this.modalRef);
|
|
18911
18970
|
}
|
|
18912
18971
|
/**
|
|
18913
18972
|
* Sets focus to the first focusable element in the modal
|
|
@@ -18931,10 +18990,13 @@ class PdsModal {
|
|
|
18931
18990
|
* Opens the modal
|
|
18932
18991
|
*/
|
|
18933
18992
|
async showModal() {
|
|
18993
|
+
var _a;
|
|
18934
18994
|
if (this.modalRef) {
|
|
18935
18995
|
try {
|
|
18936
|
-
// Store the currently focused element to restore focus when modal closes
|
|
18937
|
-
|
|
18996
|
+
// Store the currently focused element to restore focus when modal closes. Showing an open
|
|
18997
|
+
// modal again (the open watcher does) would record a control inside it instead.
|
|
18998
|
+
if (!this.modalRef.open)
|
|
18999
|
+
this.previousActiveElement = document.activeElement;
|
|
18938
19000
|
// showModal() promotes the dialog to the browser top layer (and makes the
|
|
18939
19001
|
// rest of the page inert), which prevents any overlay outside the dialog
|
|
18940
19002
|
// from ever painting above it. show() opens a non-modal dialog that stays
|
|
@@ -18951,9 +19013,20 @@ class PdsModal {
|
|
|
18951
19013
|
openModals.set(this.el, ++openSequence);
|
|
18952
19014
|
// Update focusable elements and set initial focus
|
|
18953
19015
|
// Using a longer timeout to ensure all components are fully rendered
|
|
19016
|
+
const openedAs = (_a = openModals.get(this.el)) !== null && _a !== void 0 ? _a : 0;
|
|
18954
19017
|
setTimeout(() => {
|
|
18955
19018
|
var _a, _b;
|
|
18956
19019
|
this.updateFocusableElements();
|
|
19020
|
+
// A modal opened above this one in the meantime has focus; don't take it back. Not this
|
|
19021
|
+
// modal itself (moving it gives it a new place), and not a disableTopLayer modal outside
|
|
19022
|
+
// it while this one is in the top layer, which sits below it.
|
|
19023
|
+
const openedAbove = Array.from(openModals).some(([modal, sequence]) => sequence > openedAs &&
|
|
19024
|
+
modal !== this.el &&
|
|
19025
|
+
(containsComposed(this.el, modal) || !modal.disableTopLayer || this.disableTopLayer));
|
|
19026
|
+
if (openedAbove) {
|
|
19027
|
+
this.pdsModalOpen.emit();
|
|
19028
|
+
return;
|
|
19029
|
+
}
|
|
18957
19030
|
if (this.disableInitialFocus) {
|
|
18958
19031
|
// show()/showModal() also move focus into the dialog natively (the
|
|
18959
19032
|
// HTML spec's "dialog focusing steps") — that native step isn't
|
|
@@ -18997,6 +19070,7 @@ class PdsModal {
|
|
|
18997
19070
|
* Closes the modal
|
|
18998
19071
|
*/
|
|
18999
19072
|
async hideModal() {
|
|
19073
|
+
var _a;
|
|
19000
19074
|
if (this.modalRef) {
|
|
19001
19075
|
try {
|
|
19002
19076
|
// Capture before close(): with the async task queue, a prop change
|
|
@@ -19012,11 +19086,18 @@ class PdsModal {
|
|
|
19012
19086
|
this.modalRef.close();
|
|
19013
19087
|
this.open = false;
|
|
19014
19088
|
openModals.delete(this.el);
|
|
19015
|
-
// Restore focus to the element that was focused before the modal was opened
|
|
19016
|
-
|
|
19017
|
-
|
|
19018
|
-
|
|
19019
|
-
this.previousActiveElement
|
|
19089
|
+
// Restore focus to the element that was focused before the modal was opened. If that's
|
|
19090
|
+
// gone or can't take focus (disabled, hidden, or nothing), fall back to the open modal now
|
|
19091
|
+
// on top, so focus doesn't land on an inert page behind it.
|
|
19092
|
+
if (!focusAlreadyMovedElsewhere) {
|
|
19093
|
+
const previous = this.previousActiveElement;
|
|
19094
|
+
if (previous && previous !== document.body && previous.isConnected)
|
|
19095
|
+
(_a = previous.focus) === null || _a === void 0 ? void 0 : _a.call(previous);
|
|
19096
|
+
const active = deepActiveElement$1();
|
|
19097
|
+
// document.body isn't a real restore target — it's just where focus lands when nothing
|
|
19098
|
+
// was focused before opening, so landing back there never counts as a successful restore.
|
|
19099
|
+
if (!previous || previous === document.body || !containsComposed(previous, active) || containsComposed(this.el, active))
|
|
19100
|
+
this.focusTopModal();
|
|
19020
19101
|
}
|
|
19021
19102
|
this.pdsModalClose.emit();
|
|
19022
19103
|
}
|
|
@@ -19025,6 +19106,21 @@ class PdsModal {
|
|
|
19025
19106
|
}
|
|
19026
19107
|
}
|
|
19027
19108
|
}
|
|
19109
|
+
/**
|
|
19110
|
+
* Focuses the first control of the open modal now on top, when the page behind it is inert: that
|
|
19111
|
+
* modal is in the top layer (or paints there inside a top-layer one), or it wraps this one. A
|
|
19112
|
+
* non-modal one over an interactive page, like a drawer, is left alone.
|
|
19113
|
+
*/
|
|
19114
|
+
focusTopModal() {
|
|
19115
|
+
var _a;
|
|
19116
|
+
const top = this.innermostOpenModal();
|
|
19117
|
+
const dialog = top === null || top === void 0 ? void 0 : top.querySelector('.pds-modal__backdrop');
|
|
19118
|
+
if (!dialog)
|
|
19119
|
+
return;
|
|
19120
|
+
if (!closest$1('dialog:modal', dialog) && !containsComposed(top, this.el))
|
|
19121
|
+
return;
|
|
19122
|
+
(_a = tabbableIn(dialog).find(el => !containsComposed(this.el, el))) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19123
|
+
}
|
|
19028
19124
|
/**
|
|
19029
19125
|
* Gets the z-index of a modal's backdrop element
|
|
19030
19126
|
*/
|
|
@@ -19146,14 +19242,14 @@ class PdsModal {
|
|
|
19146
19242
|
}
|
|
19147
19243
|
render() {
|
|
19148
19244
|
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
19149
|
-
return (hAsync("dialog", { key: '
|
|
19245
|
+
return (hAsync("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
|
|
19150
19246
|
'pds-modal__backdrop': true,
|
|
19151
19247
|
'open': this.open
|
|
19152
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '
|
|
19248
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
|
|
19153
19249
|
'pds-modal': true,
|
|
19154
19250
|
[`pds-modal--${sizeClass}`]: true,
|
|
19155
19251
|
'pds-modal--scrollable': this.scrollable
|
|
19156
|
-
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '
|
|
19252
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
|
|
19157
19253
|
}
|
|
19158
19254
|
get el() { return getElement(this); }
|
|
19159
19255
|
static get watchers() { return {
|
|
@@ -19446,7 +19542,7 @@ class PdsModalHeader {
|
|
|
19446
19542
|
}; }
|
|
19447
19543
|
}
|
|
19448
19544
|
|
|
19449
|
-
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
19545
|
+
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{min-width:var(--pine-dimension-none);pointer-events:none;width:100%}.pds-multiselect__option pds-chip{pointer-events:auto}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
19450
19546
|
|
|
19451
19547
|
// Names only: pds-icon's `icon` prop also fetches URLs and data: SVGs, unsanitized.
|
|
19452
19548
|
const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
|
|
@@ -19796,6 +19892,11 @@ class PdsMultiselect {
|
|
|
19796
19892
|
e.preventDefault(); // Prevent focus change
|
|
19797
19893
|
this.toggleOption(option);
|
|
19798
19894
|
};
|
|
19895
|
+
// mousedown already toggled the option. Without this, a click on the chip reaches the
|
|
19896
|
+
// checkbox through its label and toggles it a second time.
|
|
19897
|
+
this.handleOptionClick = (e) => {
|
|
19898
|
+
e.preventDefault();
|
|
19899
|
+
};
|
|
19799
19900
|
this.handleOptionMouseEnter = (index, option) => () => {
|
|
19800
19901
|
if (option.disabled)
|
|
19801
19902
|
return;
|
|
@@ -19854,6 +19955,18 @@ class PdsMultiselect {
|
|
|
19854
19955
|
this.internals = this.el.attachInternals();
|
|
19855
19956
|
}
|
|
19856
19957
|
}
|
|
19958
|
+
/**
|
|
19959
|
+
* Form Associated Custom Elements API: Called when the form is disabled
|
|
19960
|
+
*/
|
|
19961
|
+
formDisabledCallback(disabled) {
|
|
19962
|
+
// Also fires when this element's own `disabled` attribute is merely present, even as the
|
|
19963
|
+
// literal string "false" (a consumer's or React's attribute serialization can write that) —
|
|
19964
|
+
// the platform treats any value as disabled, independent of fieldset state. A real disabled
|
|
19965
|
+
// fieldset ancestor confirms this is genuinely that, not this element's own attribute.
|
|
19966
|
+
if (disabled && !this.el.closest('fieldset[disabled]'))
|
|
19967
|
+
return;
|
|
19968
|
+
this.disabled = disabled;
|
|
19969
|
+
}
|
|
19857
19970
|
componentWillLoad() {
|
|
19858
19971
|
this.originalSearchEmitter = this.pdsMultiselectSearch;
|
|
19859
19972
|
this.syncSelectedItems();
|
|
@@ -19952,8 +20065,20 @@ class PdsMultiselect {
|
|
|
19952
20065
|
var _a;
|
|
19953
20066
|
(_a = this.slottedTriggerEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', String(this.isOpen));
|
|
19954
20067
|
}
|
|
19955
|
-
disabledChanged() {
|
|
20068
|
+
disabledChanged(disabled) {
|
|
20069
|
+
var _a, _b;
|
|
19956
20070
|
this.syncSlottedTrigger();
|
|
20071
|
+
// A disabled control can't stay open, or its options could still be toggled.
|
|
20072
|
+
if (!disabled || !this.isOpen)
|
|
20073
|
+
return;
|
|
20074
|
+
const activeElement = document.activeElement;
|
|
20075
|
+
const focusInside = !!(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) || this.el.contains(activeElement));
|
|
20076
|
+
this.closeDropdown();
|
|
20077
|
+
// A disabled built-in trigger can't take focus back (falls to <body>, as natively); a slotted
|
|
20078
|
+
// trigger without its own disabled property only gets aria-disabled and stays focusable, so
|
|
20079
|
+
// focus would otherwise stay stranded on the closed panel's former content.
|
|
20080
|
+
if (focusInside)
|
|
20081
|
+
(_b = this.activeTriggerEl) === null || _b === void 0 ? void 0 : _b.focus();
|
|
19957
20082
|
}
|
|
19958
20083
|
/**
|
|
19959
20084
|
* Sets focus on the trigger button.
|
|
@@ -19963,7 +20088,8 @@ class PdsMultiselect {
|
|
|
19963
20088
|
(_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19964
20089
|
}
|
|
19965
20090
|
/**
|
|
19966
|
-
* Clears all selected values and resets the component.
|
|
20091
|
+
* Clears all selected values and resets the component. Works while disabled too, as setting a
|
|
20092
|
+
* native control's value from script does.
|
|
19967
20093
|
*/
|
|
19968
20094
|
async clear() {
|
|
19969
20095
|
const hadValues = this.value.length > 0 || this.searchQuery !== '';
|
|
@@ -20599,7 +20725,7 @@ class PdsMultiselect {
|
|
|
20599
20725
|
'pds-multiselect__option--selected': isSelected,
|
|
20600
20726
|
'pds-multiselect__option--create': isCreateOption,
|
|
20601
20727
|
'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
|
|
20602
|
-
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
|
|
20728
|
+
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
|
|
20603
20729
|
}
|
|
20604
20730
|
renderOptionAction(option, optionId, isHighlighted) {
|
|
20605
20731
|
var _a;
|
|
@@ -20681,10 +20807,10 @@ class PdsMultiselect {
|
|
|
20681
20807
|
}
|
|
20682
20808
|
render() {
|
|
20683
20809
|
const hasSelections = this.selectedItems.length > 0;
|
|
20684
|
-
return (hAsync(Host, { key: '
|
|
20810
|
+
return (hAsync(Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
20685
20811
|
'pds-multiselect__label': true,
|
|
20686
20812
|
'visually-hidden': this.hideLabel,
|
|
20687
|
-
} }, this.label)), hAsync("div", { key: '
|
|
20813
|
+
} }, this.label)), hAsync("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
20688
20814
|
'pds-multiselect__trigger': true,
|
|
20689
20815
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
20690
20816
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -20700,7 +20826,7 @@ class PdsMultiselect {
|
|
|
20700
20826
|
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
|
|
20701
20827
|
'pds-multiselect__trigger-text': true,
|
|
20702
20828
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
20703
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
20829
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, hAsync("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
|
|
20704
20830
|
}
|
|
20705
20831
|
static get formAssociated() { return true; }
|
|
20706
20832
|
get el() { return getElement(this); }
|
|
@@ -21742,7 +21868,7 @@ class PdsProperty {
|
|
|
21742
21868
|
|
|
21743
21869
|
const labelCss$3 = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
21744
21870
|
|
|
21745
|
-
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
|
|
21871
|
+
const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
|
|
21746
21872
|
|
|
21747
21873
|
/**
|
|
21748
21874
|
* @slot image - Custom image content to display instead of the default radio input
|
|
@@ -22140,23 +22266,23 @@ class PdsRow {
|
|
|
22140
22266
|
}
|
|
22141
22267
|
render() {
|
|
22142
22268
|
const rowClasses = `
|
|
22143
|
-
${this.alignItems
|
|
22269
|
+
${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
|
|
22144
22270
|
${this.border ? 'pds-row--border' : ''}
|
|
22145
|
-
${this.justifyContent
|
|
22271
|
+
${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
|
|
22146
22272
|
${this.noWrap ? 'pds-row--no-wrap' : ''}
|
|
22147
22273
|
`;
|
|
22148
22274
|
const rowInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.colGap && {
|
|
22149
|
-
'--row-gap-x': this.colGap
|
|
22150
|
-
'--row-gap-y': this.colGap
|
|
22275
|
+
'--row-gap-x': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
|
|
22276
|
+
'--row-gap-y': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
|
|
22151
22277
|
})), (this.colGapBlock && {
|
|
22152
|
-
'--row-gap-y': this.colGapBlock
|
|
22278
|
+
'--row-gap-y': this.colGapBlock != null && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
|
|
22153
22279
|
})), (this.colGapInline && {
|
|
22154
|
-
'--row-gap-x': this.colGapInline
|
|
22280
|
+
'--row-gap-x': this.colGapInline != null && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
|
|
22155
22281
|
})), (this.minHeight && {
|
|
22156
22282
|
'min-height': this.minHeight,
|
|
22157
22283
|
}));
|
|
22158
22284
|
this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
|
|
22159
|
-
return hAsync(Host, { key: '
|
|
22285
|
+
return hAsync(Host, { key: '452882c1105868f5d392e7cb165311b1abc4a243', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
|
|
22160
22286
|
}
|
|
22161
22287
|
get el() { return getElement(this); }
|
|
22162
22288
|
static get style() { return pdsRowCss(); }
|
|
@@ -25377,6 +25503,18 @@ class PdsSwitch {
|
|
|
25377
25503
|
this.checked = state === (this.value || 'on');
|
|
25378
25504
|
}
|
|
25379
25505
|
}
|
|
25506
|
+
/**
|
|
25507
|
+
* Form Associated Custom Elements API: Called when the form is disabled
|
|
25508
|
+
*/
|
|
25509
|
+
formDisabledCallback(disabled) {
|
|
25510
|
+
// Also fires when this element's own `disabled` attribute is merely present, even as the
|
|
25511
|
+
// literal string "false" (a consumer's or React's attribute serialization can write that) —
|
|
25512
|
+
// the platform treats any value as disabled, independent of fieldset state. A real disabled
|
|
25513
|
+
// fieldset ancestor confirms this is genuinely that, not this element's own attribute.
|
|
25514
|
+
if (disabled && !this.el.closest('fieldset[disabled]'))
|
|
25515
|
+
return;
|
|
25516
|
+
this.disabled = disabled;
|
|
25517
|
+
}
|
|
25380
25518
|
componentWillLoad() {
|
|
25381
25519
|
this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
|
|
25382
25520
|
this.updateHasLabelSlot();
|
|
@@ -25385,9 +25523,9 @@ class PdsSwitch {
|
|
|
25385
25523
|
const hostClass = this.switchClassNames();
|
|
25386
25524
|
const ariaDisabled = this.disabled ? 'true' : null;
|
|
25387
25525
|
this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
|
|
25388
|
-
return (hAsync(Host, { key: '
|
|
25389
|
-
hAsync("div", { key: '
|
|
25390
|
-
hAsync("div", { key: '
|
|
25526
|
+
return (hAsync(Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
|
|
25527
|
+
hAsync("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
|
|
25528
|
+
hAsync("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f49caaba976579eb5588e442499595c7dba7ceff', icon: danger, size: "small" }), this.errorMessage)));
|
|
25391
25529
|
}
|
|
25392
25530
|
static get formAssociated() { return true; }
|
|
25393
25531
|
get el() { return getElement(this); }
|
|
@@ -25832,6 +25970,7 @@ class PdsTableCell {
|
|
|
25832
25970
|
this.scrollContainer = null;
|
|
25833
25971
|
this.setupRetries = 0;
|
|
25834
25972
|
this.truncationCleanup = null;
|
|
25973
|
+
this.hasLoaded = false;
|
|
25835
25974
|
/**
|
|
25836
25975
|
* Determines if the table is currently scrolling.
|
|
25837
25976
|
* @defaultValue false
|
|
@@ -25857,8 +25996,23 @@ class PdsTableCell {
|
|
|
25857
25996
|
componentWillRender() {
|
|
25858
25997
|
this.tableRef = this.hostElement.closest('pds-table');
|
|
25859
25998
|
}
|
|
25999
|
+
// Fires again each time the cell is moved (a sort re-appends every row), unlike componentDidLoad,
|
|
26000
|
+
// so it re-binds what disconnectedCallback tore down. The tooltip binds to the host, which exists before load.
|
|
26001
|
+
connectedCallback() {
|
|
26002
|
+
if (!this.hasLoaded)
|
|
26003
|
+
return;
|
|
26004
|
+
this.tableRef = this.hostElement.closest('pds-table');
|
|
26005
|
+
this.cleanupScrollListener();
|
|
26006
|
+
if (this.needsScrollShadow) {
|
|
26007
|
+
this.setupScrollListener();
|
|
26008
|
+
}
|
|
26009
|
+
if (this.truncate) {
|
|
26010
|
+
this.initTruncationTooltip();
|
|
26011
|
+
}
|
|
26012
|
+
}
|
|
25860
26013
|
componentDidLoad() {
|
|
25861
|
-
|
|
26014
|
+
this.hasLoaded = true;
|
|
26015
|
+
if (this.needsScrollShadow) {
|
|
25862
26016
|
// For responsive tables with fixed columns, set up scroll detection
|
|
25863
26017
|
// This enables the first column to show a shadow when the table is scrolled horizontally
|
|
25864
26018
|
this.setupScrollListener();
|
|
@@ -25871,6 +26025,10 @@ class PdsTableCell {
|
|
|
25871
26025
|
this.cleanupScrollListener();
|
|
25872
26026
|
this.destroyTruncationTooltip();
|
|
25873
26027
|
}
|
|
26028
|
+
get needsScrollShadow() {
|
|
26029
|
+
var _a;
|
|
26030
|
+
return Boolean(((_a = this.tableRef) === null || _a === void 0 ? void 0 : _a.responsive) && this.tableRef.fixedColumn);
|
|
26031
|
+
}
|
|
25874
26032
|
setupScrollListener() {
|
|
25875
26033
|
var _a;
|
|
25876
26034
|
if (!this.tableRef)
|
|
@@ -25949,11 +26107,11 @@ class PdsTableCell {
|
|
|
25949
26107
|
return classNames.join(' ');
|
|
25950
26108
|
}
|
|
25951
26109
|
render() {
|
|
25952
|
-
return (hAsync(Host, { key: '
|
|
26110
|
+
return (hAsync(Host, { key: 'de70a1002cc46e204f87349069b86ca43aa2129a', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
|
|
25953
26111
|
this.tableRef.fixedColumn &&
|
|
25954
26112
|
this.tableRef.selectable
|
|
25955
26113
|
? { '--fixed-cell-position': '40px' }
|
|
25956
|
-
: {} }, hAsync("slot", { key: '
|
|
26114
|
+
: {} }, hAsync("slot", { key: '5e2b3308291e480323d7a1ac0575035758fb3695' })));
|
|
25957
26115
|
}
|
|
25958
26116
|
get hostElement() { return getElement(this); }
|
|
25959
26117
|
static get watchers() { return {
|
|
@@ -26832,9 +26990,10 @@ class PdsText {
|
|
|
26832
26990
|
}
|
|
26833
26991
|
validateSize(newValue) {
|
|
26834
26992
|
// Skip when the prop is omitted or explicitly cleared (an empty string is a
|
|
26835
|
-
// common "unset" sentinel)
|
|
26993
|
+
// common "unset" sentinel), or its attribute was removed (Stencil sets the
|
|
26994
|
+
// prop to `null`). Any other unsupported value — including a
|
|
26836
26995
|
// whitespace-only string — is a developer mistake worth warning about.
|
|
26837
|
-
if (newValue
|
|
26996
|
+
if (newValue == null || newValue === '') {
|
|
26838
26997
|
return;
|
|
26839
26998
|
}
|
|
26840
26999
|
if (!TEXT_SIZES.includes(newValue)) {
|
|
@@ -26847,6 +27006,13 @@ class PdsText {
|
|
|
26847
27006
|
// any attempt to apply an unknown size class. @Watch covers later changes.
|
|
26848
27007
|
this.validateSize(this.size);
|
|
26849
27008
|
}
|
|
27009
|
+
// componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
|
|
27010
|
+
// down. Before the first render there's no contentEl yet, and componentDidLoad binds it.
|
|
27011
|
+
connectedCallback() {
|
|
27012
|
+
if (this.truncate && this.contentEl) {
|
|
27013
|
+
this.initTruncationTooltip();
|
|
27014
|
+
}
|
|
27015
|
+
}
|
|
26850
27016
|
componentDidLoad() {
|
|
26851
27017
|
if (this.truncate) {
|
|
26852
27018
|
this.initTruncationTooltip();
|
|
@@ -26876,23 +27042,23 @@ class PdsText {
|
|
|
26876
27042
|
const Tag = this.tag;
|
|
26877
27043
|
const typeClasses = `
|
|
26878
27044
|
pds-text
|
|
26879
|
-
${this.align
|
|
27045
|
+
${this.align != null && this.align.trim() !== ''
|
|
26880
27046
|
? `pds-text--align-${this.align}`
|
|
26881
27047
|
: ''}
|
|
26882
|
-
${this.gutter
|
|
27048
|
+
${this.gutter != null && this.gutter.trim() !== ''
|
|
26883
27049
|
? `pds-text--gutter-${this.gutter}`
|
|
26884
27050
|
: ''}
|
|
26885
|
-
${this.size
|
|
27051
|
+
${this.size != null && this.size.trim() !== ''
|
|
26886
27052
|
? `pds-text--size-${this.size}`
|
|
26887
27053
|
: ''}
|
|
26888
|
-
${this.weight
|
|
27054
|
+
${this.weight != null && this.weight.trim() !== ''
|
|
26889
27055
|
? `pds-text--weight-${this.weight}`
|
|
26890
27056
|
: ''}
|
|
26891
|
-
${this.decoration
|
|
27057
|
+
${this.decoration != null && this.decoration.trim() !== ''
|
|
26892
27058
|
? `pds-text--decoration-${this.decoration}`
|
|
26893
27059
|
: ''}
|
|
26894
27060
|
`;
|
|
26895
|
-
return (hAsync(Tag, { key: '
|
|
27061
|
+
return (hAsync(Tag, { key: '6460288f1d395080a39aec214e55cab87fdaec9f', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'a8be0d96f72d8ee44288d7c8615155dc68d92663' })));
|
|
26896
27062
|
}
|
|
26897
27063
|
get el() { return getElement(this); }
|
|
26898
27064
|
static get watchers() { return {
|