@patternfly/elements 2.0.5 → 2.1.0
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/custom-elements.json +436 -21
- package/package.json +5 -4
- package/pf-accordion/BaseAccordion.js +2 -1
- package/pf-accordion/BaseAccordion.js.map +1 -1
- package/pf-accordion/BaseAccordionHeader.js +2 -1
- package/pf-accordion/BaseAccordionHeader.js.map +1 -1
- package/pf-accordion/BaseAccordionPanel.js +2 -1
- package/pf-accordion/BaseAccordionPanel.js.map +1 -1
- package/pf-accordion/pf-accordion-header.js.map +1 -1
- package/pf-accordion/pf-accordion-panel.js.map +1 -1
- package/pf-accordion/pf-accordion.d.ts +1 -1
- package/pf-accordion/pf-accordion.js +1 -1
- package/pf-accordion/pf-accordion.js.map +1 -1
- package/pf-avatar/BaseAvatar.js +2 -1
- package/pf-avatar/BaseAvatar.js.map +1 -1
- package/pf-avatar/pf-avatar.d.ts +1 -1
- package/pf-avatar/pf-avatar.js +1 -1
- package/pf-avatar/pf-avatar.js.map +1 -1
- package/pf-badge/BaseBadge.js +2 -1
- package/pf-badge/BaseBadge.js.map +1 -1
- package/pf-badge/pf-badge.d.ts +1 -1
- package/pf-badge/pf-badge.js +1 -1
- package/pf-badge/pf-badge.js.map +1 -1
- package/pf-button/BaseButton.d.ts +1 -1
- package/pf-button/BaseButton.js +6 -4
- package/pf-button/BaseButton.js.map +1 -1
- package/pf-button/pf-button.d.ts +1 -1
- package/pf-button/pf-button.js +1 -1
- package/pf-button/pf-button.js.map +1 -1
- package/pf-card/BaseCard.js +2 -1
- package/pf-card/BaseCard.js.map +1 -1
- package/pf-card/pf-card.d.ts +1 -1
- package/pf-card/pf-card.js +1 -1
- package/pf-card/pf-card.js.map +1 -1
- package/pf-clipboard-copy/BaseClipboardCopy.js +2 -1
- package/pf-clipboard-copy/BaseClipboardCopy.js.map +1 -1
- package/pf-clipboard-copy/pf-clipboard-copy.d.ts +1 -1
- package/pf-clipboard-copy/pf-clipboard-copy.js +11 -5
- package/pf-clipboard-copy/pf-clipboard-copy.js.map +1 -1
- package/pf-code-block/BaseCodeBlock.js +2 -1
- package/pf-code-block/BaseCodeBlock.js.map +1 -1
- package/pf-code-block/pf-code-block.d.ts +1 -1
- package/pf-code-block/pf-code-block.js +5 -3
- package/pf-code-block/pf-code-block.js.map +1 -1
- package/pf-icon/BaseIcon.js +2 -1
- package/pf-icon/BaseIcon.js.map +1 -1
- package/pf-icon/icons/fab/teamspeak.js +1 -1
- package/pf-icon/icons/fab/ussunnah.js +1 -1
- package/pf-icon/icons/far/bell-slash.js +1 -1
- package/pf-icon/icons/far/calendar-minus.js +1 -1
- package/pf-icon/icons/far/calendar-plus.js +1 -1
- package/pf-icon/icons/far/calendar-xmark.js +1 -1
- package/pf-icon/icons/far/chess-knight.js +1 -1
- package/pf-icon/icons/far/chess-rook.js +1 -1
- package/pf-icon/icons/far/circle-check.js +1 -1
- package/pf-icon/icons/far/circle-dot.js +1 -1
- package/pf-icon/icons/far/circle-xmark.js +1 -1
- package/pf-icon/icons/far/circle.js +1 -1
- package/pf-icon/icons/far/clone.js +1 -1
- package/pf-icon/icons/far/copy.js +1 -1
- package/pf-icon/icons/far/file-pdf.js +1 -1
- package/pf-icon/icons/far/file-zipper.js +1 -1
- package/pf-icon/icons/far/folder-closed.js +1 -1
- package/pf-icon/icons/far/font-awesome.js +1 -1
- package/pf-icon/icons/far/futbol.js +1 -1
- package/pf-icon/icons/far/gem.js +1 -1
- package/pf-icon/icons/far/hand-back-fist.js +1 -1
- package/pf-icon/icons/far/hand-peace.js +1 -1
- package/pf-icon/icons/far/hand-pointer.js +1 -1
- package/pf-icon/icons/far/hand-scissors.js +1 -1
- package/pf-icon/icons/far/hand-spock.js +1 -1
- package/pf-icon/icons/far/heart.js +1 -1
- package/pf-icon/icons/far/lightbulb.js +1 -1
- package/pf-icon/icons/far/map.js +1 -1
- package/pf-icon/icons/far/newspaper.js +1 -1
- package/pf-icon/icons/far/object-group.js +1 -1
- package/pf-icon/icons/far/paste.js +1 -1
- package/pf-icon/icons/far/rectangle-xmark.js +1 -1
- package/pf-icon/icons/far/snowflake.js +1 -1
- package/pf-icon/icons/far/square-check.js +1 -1
- package/pf-icon/icons/far/square-full.js +1 -1
- package/pf-icon/icons/far/square-minus.js +1 -1
- package/pf-icon/icons/far/square-plus.js +1 -1
- package/pf-icon/icons/far/square.js +1 -1
- package/pf-icon/icons/far/star-half-stroke.js +1 -1
- package/pf-icon/icons/far/star-half.js +1 -1
- package/pf-icon/icons/far/star.js +1 -1
- package/pf-icon/icons/far/thumbs-up.js +1 -1
- package/pf-icon/icons/fas/1.js +1 -1
- package/pf-icon/icons/fas/angle-down.js +1 -1
- package/pf-icon/icons/fas/angle-left.js +1 -1
- package/pf-icon/icons/fas/angle-right.js +1 -1
- package/pf-icon/icons/fas/angle-up.js +1 -1
- package/pf-icon/icons/fas/angles-down.js +1 -1
- package/pf-icon/icons/fas/angles-left.js +1 -1
- package/pf-icon/icons/fas/angles-right.js +1 -1
- package/pf-icon/icons/fas/angles-up.js +1 -1
- package/pf-icon/icons/fas/arrow-down-1-9.js +1 -1
- package/pf-icon/icons/fas/arrow-down-9-1.js +1 -1
- package/pf-icon/icons/fas/arrow-down-a-z.js +1 -1
- package/pf-icon/icons/fas/arrow-down-long.js +1 -1
- package/pf-icon/icons/fas/arrow-down-z-a.js +1 -1
- package/pf-icon/icons/fas/arrow-rotate-left.js +1 -1
- package/pf-icon/icons/fas/arrow-rotate-right.js +1 -1
- package/pf-icon/icons/fas/arrow-up-1-9.js +1 -1
- package/pf-icon/icons/fas/arrow-up-9-1.js +1 -1
- package/pf-icon/icons/fas/arrow-up-a-z.js +1 -1
- package/pf-icon/icons/fas/arrow-up-from-ground-water.js +1 -1
- package/pf-icon/icons/fas/arrow-up-from-water-pump.js +1 -1
- package/pf-icon/icons/fas/arrow-up-long.js +1 -1
- package/pf-icon/icons/fas/arrow-up-z-a.js +1 -1
- package/pf-icon/icons/fas/arrows-down-to-people.js +1 -1
- package/pf-icon/icons/fas/arrows-rotate.js +1 -1
- package/pf-icon/icons/fas/arrows-spin.js +1 -1
- package/pf-icon/icons/fas/arrows-to-eye.js +1 -1
- package/pf-icon/icons/fas/arrows-up-down.js +1 -1
- package/pf-icon/icons/fas/atom.js +1 -1
- package/pf-icon/icons/fas/baby.js +1 -1
- package/pf-icon/icons/fas/bacteria.js +1 -1
- package/pf-icon/icons/fas/bahai.js +1 -1
- package/pf-icon/icons/fas/basketball.js +1 -1
- package/pf-icon/icons/fas/bath.js +1 -1
- package/pf-icon/icons/fas/biohazard.js +1 -1
- package/pf-icon/icons/fas/bolt.js +1 -1
- package/pf-icon/icons/fas/book-journal-whills.js +1 -1
- package/pf-icon/icons/fas/border-none.js +1 -1
- package/pf-icon/icons/fas/bottle-droplet.js +1 -1
- package/pf-icon/icons/fas/bottle-water.js +1 -1
- package/pf-icon/icons/fas/bowling-ball.js +1 -1
- package/pf-icon/icons/fas/box-open.js +1 -1
- package/pf-icon/icons/fas/braille.js +1 -1
- package/pf-icon/icons/fas/brush.js +1 -1
- package/pf-icon/icons/fas/building-columns.js +1 -1
- package/pf-icon/icons/fas/burger.js +1 -1
- package/pf-icon/icons/fas/bus.js +1 -1
- package/pf-icon/icons/fas/calendar-minus.js +1 -1
- package/pf-icon/icons/fas/calendar-plus.js +1 -1
- package/pf-icon/icons/fas/calendar-xmark.js +1 -1
- package/pf-icon/icons/fas/camera-rotate.js +1 -1
- package/pf-icon/icons/fas/cannabis.js +1 -1
- package/pf-icon/icons/fas/car-burst.js +1 -1
- package/pf-icon/icons/fas/car-on.js +1 -1
- package/pf-icon/icons/fas/car-tunnel.js +1 -1
- package/pf-icon/icons/fas/cat.js +1 -1
- package/pf-icon/icons/fas/cedi-sign.js +1 -1
- package/pf-icon/icons/fas/cent-sign.js +1 -1
- package/pf-icon/icons/fas/chart-pie.js +1 -1
- package/pf-icon/icons/fas/check-double.js +1 -1
- package/pf-icon/icons/fas/check.js +1 -1
- package/pf-icon/icons/fas/chess-knight.js +1 -1
- package/pf-icon/icons/fas/chess-pawn.js +1 -1
- package/pf-icon/icons/fas/chess-queen.js +1 -1
- package/pf-icon/icons/fas/chess-rook.js +1 -1
- package/pf-icon/icons/fas/chevron-down.js +1 -1
- package/pf-icon/icons/fas/chevron-up.js +1 -1
- package/pf-icon/icons/fas/child-combatant.js +1 -1
- package/pf-icon/icons/fas/child-reaching.js +1 -1
- package/pf-icon/icons/fas/circle-check.js +1 -1
- package/pf-icon/icons/fas/circle-dollar-to-slot.js +1 -1
- package/pf-icon/icons/fas/circle-dot.js +1 -1
- package/pf-icon/icons/fas/circle-half-stroke.js +1 -1
- package/pf-icon/icons/fas/circle-minus.js +1 -1
- package/pf-icon/icons/fas/circle-plus.js +1 -1
- package/pf-icon/icons/fas/circle-xmark.js +1 -1
- package/pf-icon/icons/fas/circle.js +1 -1
- package/pf-icon/icons/fas/clone.js +1 -1
- package/pf-icon/icons/fas/cloud-moon-rain.js +1 -1
- package/pf-icon/icons/fas/code-branch.js +1 -1
- package/pf-icon/icons/fas/code-commit.js +1 -1
- package/pf-icon/icons/fas/code-compare.js +1 -1
- package/pf-icon/icons/fas/code-fork.js +1 -1
- package/pf-icon/icons/fas/code-merge.js +1 -1
- package/pf-icon/icons/fas/code-pull-request.js +1 -1
- package/pf-icon/icons/fas/colon-sign.js +1 -1
- package/pf-icon/icons/fas/cookie-bite.js +1 -1
- package/pf-icon/icons/fas/cookie.js +1 -1
- package/pf-icon/icons/fas/copy.js +1 -1
- package/pf-icon/icons/fas/cruzeiro-sign.js +1 -1
- package/pf-icon/icons/fas/cubes.js +1 -1
- package/pf-icon/icons/fas/dharmachakra.js +1 -1
- package/pf-icon/icons/fas/dice-d20.js +1 -1
- package/pf-icon/icons/fas/dice-d6.js +1 -1
- package/pf-icon/icons/fas/dice-five.js +1 -1
- package/pf-icon/icons/fas/dice-four.js +1 -1
- package/pf-icon/icons/fas/dice-one.js +1 -1
- package/pf-icon/icons/fas/dice-six.js +1 -1
- package/pf-icon/icons/fas/dice-three.js +1 -1
- package/pf-icon/icons/fas/dice-two.js +1 -1
- package/pf-icon/icons/fas/dice.js +1 -1
- package/pf-icon/icons/fas/disease.js +1 -1
- package/pf-icon/icons/fas/divide.js +1 -1
- package/pf-icon/icons/fas/dollar-sign.js +1 -1
- package/pf-icon/icons/fas/dumbbell.js +1 -1
- package/pf-icon/icons/fas/earth-africa.js +1 -1
- package/pf-icon/icons/fas/earth-europe.js +1 -1
- package/pf-icon/icons/fas/ellipsis-vertical.js +1 -1
- package/pf-icon/icons/fas/ellipsis.js +1 -1
- package/pf-icon/icons/fas/envelopes-bulk.js +1 -1
- package/pf-icon/icons/fas/equals.js +1 -1
- package/pf-icon/icons/fas/eraser.js +1 -1
- package/pf-icon/icons/fas/exclamation.js +1 -1
- package/pf-icon/icons/fas/face-grin-squint-tears.js +1 -1
- package/pf-icon/icons/fas/file-csv.js +1 -1
- package/pf-icon/icons/fas/file-pdf.js +1 -1
- package/pf-icon/icons/fas/file-waveform.js +1 -1
- package/pf-icon/icons/fas/file-word.js +1 -1
- package/pf-icon/icons/fas/fill.js +1 -1
- package/pf-icon/icons/fas/filter-circle-dollar.js +1 -1
- package/pf-icon/icons/fas/filter-circle-xmark.js +1 -1
- package/pf-icon/icons/fas/fingerprint.js +1 -1
- package/pf-icon/icons/fas/flag-checkered.js +1 -1
- package/pf-icon/icons/fas/flag-usa.js +1 -1
- package/pf-icon/icons/fas/futbol.js +1 -1
- package/pf-icon/icons/fas/gamepad.js +1 -1
- package/pf-icon/icons/fas/gear.js +1 -1
- package/pf-icon/icons/fas/gears.js +1 -1
- package/pf-icon/icons/fas/gem.js +1 -1
- package/pf-icon/icons/fas/genderless.js +1 -1
- package/pf-icon/icons/fas/globe.js +1 -1
- package/pf-icon/icons/fas/golf-ball-tee.js +1 -1
- package/pf-icon/icons/fas/grip-vertical.js +1 -1
- package/pf-icon/icons/fas/grip.js +1 -1
- package/pf-icon/icons/fas/group-arrows-rotate.js +1 -1
- package/pf-icon/icons/fas/hand-back-fist.js +1 -1
- package/pf-icon/icons/fas/hand-fist.js +1 -1
- package/pf-icon/icons/fas/hand-middle-finger.js +1 -1
- package/pf-icon/icons/fas/hand-peace.js +1 -1
- package/pf-icon/icons/fas/hand-pointer.js +1 -1
- package/pf-icon/icons/fas/hand-spock.js +1 -1
- package/pf-icon/icons/fas/hands-bound.js +1 -1
- package/pf-icon/icons/fas/hands-bubbles.js +1 -1
- package/pf-icon/icons/fas/hands-praying.js +1 -1
- package/pf-icon/icons/fas/hands.js +1 -1
- package/pf-icon/icons/fas/handshake-angle.js +1 -1
- package/pf-icon/icons/fas/handshake-simple-slash.js +1 -1
- package/pf-icon/icons/fas/handshake-slash.js +1 -1
- package/pf-icon/icons/fas/head-side-cough-slash.js +1 -1
- package/pf-icon/icons/fas/head-side-cough.js +1 -1
- package/pf-icon/icons/fas/head-side-mask.js +1 -1
- package/pf-icon/icons/fas/head-side-virus.js +1 -1
- package/pf-icon/icons/fas/heart-circle-bolt.js +1 -1
- package/pf-icon/icons/fas/heart-circle-check.js +1 -1
- package/pf-icon/icons/fas/heart-circle-exclamation.js +1 -1
- package/pf-icon/icons/fas/heart-circle-minus.js +1 -1
- package/pf-icon/icons/fas/heart-circle-plus.js +1 -1
- package/pf-icon/icons/fas/heart-circle-xmark.js +1 -1
- package/pf-icon/icons/fas/helicopter-symbol.js +1 -1
- package/pf-icon/icons/fas/hill-avalanche.js +1 -1
- package/pf-icon/icons/fas/holly-berry.js +1 -1
- package/pf-icon/icons/fas/horse-head.js +1 -1
- package/pf-icon/icons/fas/hourglass-half.js +1 -1
- package/pf-icon/icons/fas/house-flood-water.js +1 -1
- package/pf-icon/icons/fas/house-tsunami.js +1 -1
- package/pf-icon/icons/fas/ice-cream.js +1 -1
- package/pf-icon/icons/fas/industry.js +1 -1
- package/pf-icon/icons/fas/jedi.js +1 -1
- package/pf-icon/icons/fas/khanda.js +1 -1
- package/pf-icon/icons/fas/land-mine-on.js +1 -1
- package/pf-icon/icons/fas/laptop-file.js +1 -1
- package/pf-icon/icons/fas/leaf.js +1 -1
- package/pf-icon/icons/fas/lightbulb.js +1 -1
- package/pf-icon/icons/fas/link.js +1 -1
- package/pf-icon/icons/fas/location-arrow.js +1 -1
- package/pf-icon/icons/fas/map-pin.js +1 -1
- package/pf-icon/icons/fas/mars-and-venus.js +1 -1
- package/pf-icon/icons/fas/mars-stroke-right.js +1 -1
- package/pf-icon/icons/fas/maximize.js +1 -1
- package/pf-icon/icons/fas/mercury.js +1 -1
- package/pf-icon/icons/fas/microphone-lines.js +1 -1
- package/pf-icon/icons/fas/microphone.js +1 -1
- package/pf-icon/icons/fas/minus.js +1 -1
- package/pf-icon/icons/fas/mobile-button.js +1 -1
- package/pf-icon/icons/fas/mobile-screen-button.js +1 -1
- package/pf-icon/icons/fas/mobile-screen.js +1 -1
- package/pf-icon/icons/fas/mobile.js +1 -1
- package/pf-icon/icons/fas/mound.js +1 -1
- package/pf-icon/icons/fas/mountain.js +1 -1
- package/pf-icon/icons/fas/neuter.js +1 -1
- package/pf-icon/icons/fas/newspaper.js +1 -1
- package/pf-icon/icons/fas/not-equal.js +1 -1
- package/pf-icon/icons/fas/outdent.js +1 -1
- package/pf-icon/icons/fas/paperclip.js +1 -1
- package/pf-icon/icons/fas/parachute-box.js +1 -1
- package/pf-icon/icons/fas/paste.js +1 -1
- package/pf-icon/icons/fas/pen-nib.js +1 -1
- package/pf-icon/icons/fas/pen-to-square.js +1 -1
- package/pf-icon/icons/fas/people-arrows.js +1 -1
- package/pf-icon/icons/fas/people-robbery.js +1 -1
- package/pf-icon/icons/fas/person-breastfeeding.js +1 -1
- package/pf-icon/icons/fas/person-cane.js +1 -1
- package/pf-icon/icons/fas/person-drowning.js +1 -1
- package/pf-icon/icons/fas/person-falling.js +1 -1
- package/pf-icon/icons/fas/person-military-pointing.js +1 -1
- package/pf-icon/icons/fas/person-military-rifle.js +1 -1
- package/pf-icon/icons/fas/person-military-to-person.js +1 -1
- package/pf-icon/icons/fas/person-praying.js +1 -1
- package/pf-icon/icons/fas/person-pregnant.js +1 -1
- package/pf-icon/icons/fas/person-rifle.js +1 -1
- package/pf-icon/icons/fas/person-snowboarding.js +1 -1
- package/pf-icon/icons/fas/person-walking-luggage.js +1 -1
- package/pf-icon/icons/fas/person-walking-with-cane.js +1 -1
- package/pf-icon/icons/fas/piggy-bank.js +1 -1
- package/pf-icon/icons/fas/plug-circle-minus.js +1 -1
- package/pf-icon/icons/fas/plus.js +1 -1
- package/pf-icon/icons/fas/poo-storm.js +1 -1
- package/pf-icon/icons/fas/pump-medical.js +1 -1
- package/pf-icon/icons/fas/pump-soap.js +1 -1
- package/pf-icon/icons/fas/puzzle-piece.js +1 -1
- package/pf-icon/icons/fas/question.js +1 -1
- package/pf-icon/icons/fas/radiation.js +1 -1
- package/pf-icon/icons/fas/receipt.js +1 -1
- package/pf-icon/icons/fas/ribbon.js +1 -1
- package/pf-icon/icons/fas/rotate-left.js +1 -1
- package/pf-icon/icons/fas/rotate-right.js +1 -1
- package/pf-icon/icons/fas/rotate.js +1 -1
- package/pf-icon/icons/fas/ruler.js +1 -1
- package/pf-icon/icons/fas/rupee-sign.js +1 -1
- package/pf-icon/icons/fas/s.js +1 -1
- package/pf-icon/icons/fas/sailboat.js +1 -1
- package/pf-icon/icons/fas/scale-unbalanced-flip.js +1 -1
- package/pf-icon/icons/fas/scale-unbalanced.js +1 -1
- package/pf-icon/icons/fas/shield-cat.js +1 -1
- package/pf-icon/icons/fas/shield-dog.js +1 -1
- package/pf-icon/icons/fas/shield-halved.js +1 -1
- package/pf-icon/icons/fas/shield-heart.js +1 -1
- package/pf-icon/icons/fas/shield-virus.js +1 -1
- package/pf-icon/icons/fas/shield.js +1 -1
- package/pf-icon/icons/fas/shower.js +1 -1
- package/pf-icon/icons/fas/signal.js +1 -1
- package/pf-icon/icons/fas/signs-post.js +1 -1
- package/pf-icon/icons/fas/sliders.js +1 -1
- package/pf-icon/icons/fas/solar-panel.js +1 -1
- package/pf-icon/icons/fas/spinner.js +1 -1
- package/pf-icon/icons/fas/splotch.js +1 -1
- package/pf-icon/icons/fas/staff-snake.js +1 -1
- package/pf-icon/icons/fas/star-half-stroke.js +1 -1
- package/pf-icon/icons/fas/star-of-david.js +1 -1
- package/pf-icon/icons/fas/star-of-life.js +1 -1
- package/pf-icon/icons/fas/stethoscope.js +1 -1
- package/pf-icon/icons/fas/stopwatch-20.js +1 -1
- package/pf-icon/icons/fas/stopwatch.js +1 -1
- package/pf-icon/icons/fas/store.js +1 -1
- package/pf-icon/icons/fas/table-tennis-paddle-ball.js +1 -1
- package/pf-icon/icons/fas/temperature-arrow-down.js +1 -1
- package/pf-icon/icons/fas/temperature-arrow-up.js +1 -1
- package/pf-icon/icons/fas/temperature-empty.js +1 -1
- package/pf-icon/icons/fas/temperature-full.js +1 -1
- package/pf-icon/icons/fas/temperature-half.js +1 -1
- package/pf-icon/icons/fas/temperature-high.js +1 -1
- package/pf-icon/icons/fas/temperature-quarter.js +1 -1
- package/pf-icon/icons/fas/temperature-three-quarters.js +1 -1
- package/pf-icon/icons/fas/tent-arrows-down.js +1 -1
- package/pf-icon/icons/fas/terminal.js +1 -1
- package/pf-icon/icons/fas/toilet-paper-slash.js +1 -1
- package/pf-icon/icons/fas/toilet-paper.js +1 -1
- package/pf-icon/icons/fas/tooth.js +1 -1
- package/pf-icon/icons/fas/train-tram.js +1 -1
- package/pf-icon/icons/fas/tty.js +1 -1
- package/pf-icon/icons/fas/umbrella.js +1 -1
- package/pf-icon/icons/fas/user-large-slash.js +1 -1
- package/pf-icon/icons/fas/user-secret.js +1 -1
- package/pf-icon/icons/fas/venus-double.js +1 -1
- package/pf-icon/icons/fas/venus.js +1 -1
- package/pf-icon/icons/fas/video-slash.js +1 -1
- package/pf-icon/icons/fas/virus-slash.js +1 -1
- package/pf-icon/icons/fas/volcano.js +1 -1
- package/pf-icon/icons/fas/wine-glass-empty.js +1 -1
- package/pf-icon/icons/fas/wine-glass.js +1 -1
- package/pf-icon/icons/fas/worm.js +1 -1
- package/pf-icon/icons/fas/xmark.js +1 -1
- package/pf-icon/icons/fas/yen-sign.js +1 -1
- package/pf-icon/pf-icon.d.ts +1 -1
- package/pf-icon/pf-icon.js +1 -1
- package/pf-icon/pf-icon.js.map +1 -1
- package/pf-jump-links/pf-jump-links-item.js +5 -2
- package/pf-jump-links/pf-jump-links-item.js.map +1 -1
- package/pf-jump-links/pf-jump-links-list.js.map +1 -1
- package/pf-jump-links/pf-jump-links.d.ts +1 -1
- package/pf-jump-links/pf-jump-links.js +10 -4
- package/pf-jump-links/pf-jump-links.js.map +1 -1
- package/pf-label/BaseLabel.js +2 -1
- package/pf-label/BaseLabel.js.map +1 -1
- package/pf-label/pf-label.d.ts +1 -1
- package/pf-label/pf-label.js +1 -1
- package/pf-label/pf-label.js.map +1 -1
- package/pf-modal/pf-modal.d.ts +1 -1
- package/pf-modal/pf-modal.js +8 -2
- package/pf-modal/pf-modal.js.map +1 -1
- package/pf-panel/pf-panel.d.ts +1 -1
- package/pf-panel/pf-panel.js +1 -1
- package/pf-panel/pf-panel.js.map +1 -1
- package/pf-popover/README.md +48 -0
- package/pf-popover/pf-popover.css +191 -0
- package/pf-popover/pf-popover.d.ts +266 -0
- package/pf-popover/pf-popover.js +447 -0
- package/pf-popover/pf-popover.js.map +1 -0
- package/pf-progress-stepper/pf-progress-step.js +2 -1
- package/pf-progress-stepper/pf-progress-step.js.map +1 -1
- package/pf-progress-stepper/pf-progress-stepper.d.ts +1 -1
- package/pf-progress-stepper/pf-progress-stepper.js +5 -2
- package/pf-progress-stepper/pf-progress-stepper.js.map +1 -1
- package/pf-spinner/BaseSpinner.js +2 -1
- package/pf-spinner/BaseSpinner.js.map +1 -1
- package/pf-spinner/pf-spinner.d.ts +1 -1
- package/pf-spinner/pf-spinner.js +1 -1
- package/pf-spinner/pf-spinner.js.map +1 -1
- package/pf-switch/BaseSwitch.js +2 -1
- package/pf-switch/BaseSwitch.js.map +1 -1
- package/pf-switch/pf-switch.d.ts +1 -1
- package/pf-switch/pf-switch.js +1 -1
- package/pf-switch/pf-switch.js.map +1 -1
- package/pf-tabs/BaseTab.d.ts +1 -0
- package/pf-tabs/BaseTab.js +8 -1
- package/pf-tabs/BaseTab.js.map +1 -1
- package/pf-tabs/BaseTabPanel.js +4 -1
- package/pf-tabs/BaseTabPanel.js.map +1 -1
- package/pf-tabs/BaseTabs.js +5 -2
- package/pf-tabs/BaseTabs.js.map +1 -1
- package/pf-tabs/pf-tab-panel.d.ts +0 -1
- package/pf-tabs/pf-tab-panel.js +0 -5
- package/pf-tabs/pf-tab-panel.js.map +1 -1
- package/pf-tabs/pf-tab.d.ts +0 -1
- package/pf-tabs/pf-tab.js +0 -5
- package/pf-tabs/pf-tab.js.map +1 -1
- package/pf-tabs/pf-tabs.d.ts +1 -1
- package/pf-tabs/pf-tabs.js +1 -1
- package/pf-tabs/pf-tabs.js.map +1 -1
- package/pf-tile/pf-tile.d.ts +1 -1
- package/pf-tile/pf-tile.js +1 -1
- package/pf-tile/pf-tile.js.map +1 -1
- package/pf-timestamp/pf-timestamp.d.ts +1 -1
- package/pf-timestamp/pf-timestamp.js +5 -2
- package/pf-timestamp/pf-timestamp.js.map +1 -1
- package/pf-tooltip/BaseTooltip.js +2 -2
- package/pf-tooltip/BaseTooltip.js.map +1 -1
- package/pf-tooltip/pf-tooltip.d.ts +1 -1
- package/pf-tooltip/pf-tooltip.js +1 -1
- package/pf-tooltip/pf-tooltip.js.map +1 -1
- package/pfe.min.js +156 -100
- package/pfe.min.js.map +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseAccordion.js","sourceRoot":"","sources":["BaseAccordion.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAEpE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC3F,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;;;AAI7D,MAAM,mBAAmB,GAAG,6BAA6B,CAAC;AAE1D,MAAM,OAAO,oBAAqB,SAAQ,aAAa;IACrD,YACS,MAA2B,EAC3B,KAAyB;QAEhC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAqB;QAC3B,UAAK,GAAL,KAAK,CAAoB;IAGlC,CAAC;CACF;AAED,MAAM,OAAO,sBAAuB,SAAQ,aAAa;IACvD,YACS,MAA2B,EAC3B,KAAyB;QAEhC,KAAK,CAAC,UAAU,CAAC,CAAC;QAHX,WAAM,GAAN,MAAM,CAAqB;QAC3B,UAAK,GAAL,KAAK,CAAoB;IAGlC,CAAC;CACF;AAED,MAAM,OAAgB,aAAc,SAAQ,UAAU;IAAtD;;;QAeE;;;;;;;;WAQG;QAYA,kBAAa,GAAa,EAAE,CAAC;QAUtB,iBAAY,GAAG,IAAI,GAAG,EAAU,CAAC;QAE3C,gCAAU,IAAI,MAAM,CAAC,IAAI,CAAC,EAAC;QAE3B,gCAAU,gBAAgB,CAAC,IAAI,CAAC,EAAC;QAEjC,4CAAsB,uBAAA,IAAI,qEAAsB,MAA1B,IAAI,CAAwB,EAAC;QAEnD,mDAAmD;QACnD,qCAAe,KAAK,EAAC;QAWrB,4BAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,qDAAM,MAAV,IAAI,CAAQ,CAAC,EAAC;IAmUjD,CAAC;IAjYC,MAAM,CAAC,WAAW,CAAC,MAA0B;QAC3C,OAAO,MAAM,YAAY,aAAa,CAAC;IACzC,CAAC;IAED,MAAM,CAAC,QAAQ,CAAC,MAA0B;QACxC,OAAO,MAAM,YAAY,mBAAmB,CAAC;IAC/C,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,MAA0B;QACvC,OAAO,MAAM,YAAY,kBAAkB,CAAC;IAC9C,CAAC;IAwBD,IAAI,OAAO;QACT,OAAO,uBAAA,IAAI,2DAAY,MAAhB,IAAI,CAAc,CAAC;IAC5B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,0DAAW,MAAf,IAAI,CAAa,CAAC;IAC3B,CAAC;IAakB,KAAK,CAAC,iBAAiB;QACxC,MAAM,CAAC,GAAG,MAAM,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1C,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAChC,GAAG,uBAAA,IAAI,2DAAY,MAAhB,IAAI,CAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;YAChD,GAAG,uBAAA,IAAI,0DAAW,MAAf,IAAI,CAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;SAChD,CAAC,CAAC;QACH,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAID,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,uBAAA,IAAI,yDAA2B,CAAC,CAAC;QACjE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,0DAAW,CAAC,CAAC;QAClD,uBAAA,IAAI,yBAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5C,uBAAA,IAAI,qDAAM,MAAV,IAAI,CAAQ,CAAC;IACf,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAChC,IAAI,MAAM,CAAC,QAAQ,EAAE;gBACnB,uBAAA,IAAI,6DAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,KAAK,CAAC,CAAC;gBAClC,MAAM,KAAK,GAAG,uBAAA,IAAI,+DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC;gBAC3C,IAAI,KAAK,EAAE;oBACT,uBAAA,IAAI,4DAAa,MAAjB,IAAI,EAAc,KAAK,CAAC,CAAC;iBAC1B;aACF;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAyMM,mBAAmB;QACxB,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAEzB,gEAAgE;QAChE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvB,MAAM,KAAK,GAAG,uBAAA,IAAI,+DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC;YAC3C,IAAI,KAAK,EAAE;gBACT,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;gBAC/C,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;gBACjD,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;aAChC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACI,KAAK,CAAC,MAAM,CAAC,KAAa;QAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAE9B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;YACpB,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC1B;aAAM;YACL,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,MAAM,CAAC,KAAa,EAAE,eAA+B;QAChE,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,OAAO;SACR;QAED,MAAM,UAAU,GAA+B,uBAAA,IAAI,2DAAY,MAAhB,IAAI,EAAa,eAAe,CAAC,CAAC;QAEjF,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,MAAM,KAAK,GAAG,uBAAA,IAAI,+DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QAED,2CAA2C;QAC3C,uBAAA,IAAI,6DAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,KAAK,CAAC;YACjC,uBAAA,IAAI,4DAAa,MAAjB,IAAI,EAAc,KAAK,CAAC;YAExB,MAAM,CAAC,KAAK,EAAE,CAAC;QAEf,IAAI,CAAC,aAAa,CAAC,IAAI,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAE5D,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;;OAEG;IACI,KAAK,CAAC,SAAS;QACpB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,uBAAA,IAAI,6DAAc,MAAlB,IAAI,EAAe,MAAM,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,uBAAA,IAAI,4DAAa,MAAjB,IAAI,EAAc,KAAK,CAAC,CAAC,CAAC;QACvD,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;;OAEG;IACI,KAAK,CAAC,QAAQ,CAAC,KAAa;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAEpC,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;YACrB,OAAO;SACR;QAED,uBAAA,IAAI,+DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC;QAC7B,uBAAA,IAAI,8DAAe,MAAnB,IAAI,EAAgB,KAAK,CAAC,CAAC;QAE3B,IAAI,CAAC,aAAa,CAAC,IAAI,sBAAsB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAC9D,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;;OAEG;IACI,KAAK,CAAC,WAAW;QACtB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,uBAAA,IAAI,+DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC,CAAC;QAC7D,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,uBAAA,IAAI,8DAAe,MAAnB,IAAI,EAAgB,KAAK,CAAC,CAAC,CAAC;QACzD,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;;;AArSD;;;;;GAKG;AACH,KAAK;IACH,0HAAsB,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,MAAA,CAAC;IAClD,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAC7B,CAAC,yEAEe,MAA2B;IACzC,MAAM,IAAI,GAAG,MAAM,CAAC,kBAAkB,CAAC;IACvC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAChC,OAAO,KAAK,uBAAA,IAAI,6BAAQ,CAAC,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACnF;SAAM;QACL,OAAO,IAAI,CAAC;KACb;AACH,CAAC,qEAEa,MAA2B,EAAE,KAAK,GAAG,uBAAA,IAAI,yDAAU,MAAd,IAAI,EAAW,MAAM,CAAC;IACvE,wEAAwE;IACxE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC7B,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;AACzB,CAAC,+BAED,KAAK,qCAAc,KAAyB;IAC1C,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IAErB,MAAM,KAAK,CAAC,cAAc,CAAC;IAE3B,MAAM,IAAI,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAE3C,uBAAA,IAAI,wDAAS,MAAb,IAAI,EAAU,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AACvC,CAAC,kCAED,KAAK,wCAAiB,MAA2B,EAAE,KAAK,GAAG,uBAAA,IAAI,yDAAU,MAAd,IAAI,EAAW,MAAM,CAAC;IAC/E,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,MAAM,IAAI,CAAC,cAAc,CAAC;KAC3B;IACD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,MAAM,MAAM,CAAC,cAAc,CAAC;AAC9B,CAAC,iCAED,KAAK,uCAAgB,KAAyB;IAC5C,MAAM,KAAK,CAAC,cAAc,CAAC;IAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;QACnB,OAAO;KACR;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAE3C,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IAEpB,uBAAA,IAAI,wDAAS,MAAb,IAAI,EAAU,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACrC,MAAM,KAAK,CAAC,cAAc,CAAC;AAC7B,CAAC;IAGC,IAAI,kBAAkB,IAAI,IAAI,EAAE;QAC9B,iEAAiE;QACjE,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;KAC3E;SAAM;QACL,MAAM,EAAE,kBAAkB,EAAE,GAAG,uBAAA,IAAI,6BAAQ,CAAC;QAE5C,MAAM,MAAM,GAAG,mBAAmB,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAEpE,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,CAAC,CAAC;SACV;QAED,MAAM,MAAM,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;QAE9C,IAAI,MAAM,CAAC,IAAI,KAAK,GAAG,EAAE;YACvB,OAAO,MAAM,GAAG,IAAI,CAAC;SACtB;aAAM;YACL,OAAO,MAAM,CAAC;SACf;KACF;AACH,CAAC,2BAED,KAAK,iCAAU,KAAyB,EAAE,KAAa,EAAE,GAAW;IAClE,IAAI,KAAK,EAAE;QACT,MAAM,MAAM,GAAG,KAAK,CAAC,sBAAsB,CAAC;QAE5C,MAAM,kBAAkB,GAAG,uBAAA,IAAI,qEAAsB,MAA1B,IAAI,CAAwB,CAAC;QACxD,IAAI,kBAAkB,EAAE;YACtB,uBAAA,IAAI,qCAAuB,kBAAkB,MAAA,CAAC;SAC/C;QAED,MAAM,QAAQ,GAAG,uBAAA,IAAI,yCAAoB,IAAI,CAAC,CAAC;QAE/C,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACnC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAEjC,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,EAAE,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;QACtF,SAAS,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,SAAS,CAAC,QAAQ,CAAC;QAEzB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACtC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAEpC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACrC,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;KAChC;AACH,CAAC,6DAES,KAAiC;IACzC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;QACxC,OAAO;KACR;IAED,MAAM,KAAK,GAAG,uBAAA,IAAI,yDAAU,MAAd,IAAI,EAAW,KAAK,CAAC,MAAiB,CAAC,CAAC;IAEtD,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;KACrC;SAAM;QACL,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KACtB;AACH,CAAC;AAED;;GAEG;AACH,KAAK,mCAAY,GAAkB;IACjC,MAAM,aAAa,GAAG,GAAG,CAAC,MAAiB,CAAC;IAE5C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;QAC1C,OAAO;KACR;IAED,IAAI,SAA0C,CAAC;IAE/C,QAAQ,GAAG,CAAC,GAAG,EAAE;QACf,KAAK,WAAW;YACd,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,SAAS,GAAG,uBAAA,IAAI,2DAAY,MAAhB,IAAI,CAAc,CAAC;YAC/B,MAAM;QACR,KAAK,SAAS;YACZ,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,SAAS,GAAG,uBAAA,IAAI,+DAAgB,MAApB,IAAI,CAAkB,CAAC;YACnC,MAAM;QACR,KAAK,MAAM;YACT,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,SAAS,GAAG,uBAAA,IAAI,4DAAa,MAAjB,IAAI,CAAe,CAAC;YAChC,MAAM;QACR,KAAK,KAAK;YACR,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,SAAS,GAAG,uBAAA,IAAI,2DAAY,MAAhB,IAAI,CAAc,CAAC;YAC/B,MAAM;KACT;IAED,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC;AACvB,CAAC,iEAEW,YAA2B,IAAI;IACzC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AACvE,CAAC,+DAEU,YAA2B,IAAI;IACxC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC;IAGC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,GAAG,CAAC,CAAC;IACzF,OAAO,OAAO,CAAC,CAAC,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;AAC/D,CAAC;IAGC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,GAAG,CAAC,CAAC;IACzF,OAAO,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;AAC5C,CAAC;IAGC,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC5B,CAAC;IAGC,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7B,CAAC,6DAES,EAAkB;IAC1B,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;QAC9B,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;KAC9D;IAED,IAAI,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;KAC3D;IAED,uBAAA,IAAI,6BAAQ,CAAC,IAAI,CAAC,oEAAoE,CAAC,CAAC;IACxF,OAAO,CAAC,CAAC,CAAC;AACZ,CAAC;AAlSe,oBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAkC9B;IAXF,QAAQ,CAAC,KAAK,UAAU,oBAAoB,CAAsB,MAAe,EAAE,MAAe;QACjG,IAAI,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE;YAC/B,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YACzB,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;gBAClC,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,CAAC;IACD,QAAQ,CAAC;QACR,SAAS,EAAE,gBAAgB;QAC3B,SAAS,EAAE,mBAAmB;KAC/B,CAAC;oDAA8B","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { NumberListConverter, ComposedEvent } from '@patternfly/pfe-core';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { AccordionHeaderChangeEvent, BaseAccordionHeader } from './BaseAccordionHeader.js';\nimport { BaseAccordionPanel } from './BaseAccordionPanel.js';\n\nimport style from './BaseAccordion.css';\n\nconst CSS_TIMING_UNITS_RE = /^[0-9.]+(?<unit>[a-zA-Z]+)/g;\n\nexport class AccordionExpandEvent extends ComposedEvent {\n constructor(\n public toggle: BaseAccordionHeader,\n public panel: BaseAccordionPanel,\n ) {\n super('expand');\n }\n}\n\nexport class AccordionCollapseEvent extends ComposedEvent {\n constructor(\n public toggle: BaseAccordionHeader,\n public panel: BaseAccordionPanel,\n ) {\n super('collapse');\n }\n}\n\nexport abstract class BaseAccordion extends LitElement {\n static readonly styles = [style];\n\n static isAccordion(target: EventTarget | null): target is BaseAccordion {\n return target instanceof BaseAccordion;\n }\n\n static isHeader(target: EventTarget | null): target is BaseAccordionHeader {\n return target instanceof BaseAccordionHeader;\n }\n\n static isPanel(target: EventTarget | null): target is BaseAccordionPanel {\n return target instanceof BaseAccordionPanel;\n }\n\n /**\n * Sets and reflects the currently expanded accordion 0-based indexes.\n * Use commas to separate multiple indexes.\n * ```html\n * <pf-accordion expanded-index=\"1,2\">\n * ...\n * </pf-accordion>\n * ```\n */\n @observed(async function expandedIndexChanged(this: BaseAccordion, oldVal: unknown, newVal: unknown) {\n if (oldVal && oldVal !== newVal) {\n await this.collapseAll();\n for (const i of this.expandedIndex) {\n await this.expand(i, this);\n }\n }\n })\n @property({\n attribute: 'expanded-index',\n converter: NumberListConverter\n }) expandedIndex: number[] = [];\n\n get headers() {\n return this.#allHeaders();\n }\n\n get panels() {\n return this.#allPanels();\n }\n\n protected expandedSets = new Set<number>();\n\n #logger = new Logger(this);\n\n #styles = getComputedStyle(this);\n\n #transitionDuration = this.#getAnimationDuration();\n\n // actually is read in #init, by the `||=` operator\n #initialized = false;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const c = await super.getUpdateComplete();\n const results = await Promise.all([\n ...this.#allHeaders().map(x => x.updateComplete),\n ...this.#allPanels().map(x => x.updateComplete),\n ]);\n return c && results.every(Boolean);\n }\n\n #mo = new MutationObserver(() => this.#init());\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('change', this.#onChange as EventListener);\n this.addEventListener('keydown', this.#onKeydown);\n this.#mo.observe(this, { childList: true });\n this.#init();\n }\n\n render(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n\n async firstUpdated() {\n const { headers } = this;\n headers.forEach((header, index) => {\n if (header.expanded) {\n this.#expandHeader(header, index);\n const panel = this.#panelForHeader(header);\n if (panel) {\n this.#expandPanel(panel);\n }\n }\n });\n }\n\n /**\n * Initialize the accordion by connecting headers and panels\n * with aria controls and labels; set up the default disclosure\n * state if not set by the author; and check the URL for default\n * open\n */\n async #init() {\n this.#initialized ||= !!await this.updateComplete;\n this.updateAccessibility();\n }\n\n #panelForHeader(header: BaseAccordionHeader) {\n const next = header.nextElementSibling;\n if (!BaseAccordion.isPanel(next)) {\n return void this.#logger.error('Sibling element to a header needs to be a panel');\n } else {\n return next;\n }\n }\n\n #expandHeader(header: BaseAccordionHeader, index = this.#getIndex(header)) {\n // If this index is not already listed in the expandedSets array, add it\n this.expandedSets.add(index);\n header.expanded = true;\n }\n\n async #expandPanel(panel: BaseAccordionPanel) {\n panel.expanded = true;\n panel.hidden = false;\n\n await panel.updateComplete;\n\n const rect = panel.getBoundingClientRect();\n\n this.#animate(panel, 0, rect.height);\n }\n\n async #collapseHeader(header: BaseAccordionHeader, index = this.#getIndex(header)) {\n if (!this.expandedSets) {\n await this.updateComplete;\n }\n this.expandedSets.delete(index);\n header.expanded = false;\n await header.updateComplete;\n }\n\n async #collapsePanel(panel: BaseAccordionPanel) {\n await panel.updateComplete;\n if (!panel.expanded) {\n return;\n }\n\n const rect = panel.getBoundingClientRect();\n\n panel.expanded = false;\n panel.hidden = true;\n\n this.#animate(panel, rect.height, 0);\n await panel.updateComplete;\n }\n\n #getAnimationDuration(): number {\n if ('computedStyleMap' in this) {\n // @ts-expect-error: https://caniuse.com/?search=computedStyleMap\n return this.computedStyleMap().get('transition-duration')?.to('ms').value;\n } else {\n const { transitionDuration } = this.#styles;\n\n const groups = CSS_TIMING_UNITS_RE.exec(transitionDuration)?.groups;\n\n if (!groups) {\n return 0;\n }\n\n const parsed = parseFloat(transitionDuration);\n\n if (groups.unit === 's') {\n return parsed * 1000;\n } else {\n return parsed;\n }\n }\n }\n\n async #animate(panel: BaseAccordionPanel, start: number, end: number) {\n if (panel) {\n const header = panel.previousElementSibling;\n\n const transitionDuration = this.#getAnimationDuration();\n if (transitionDuration) {\n this.#transitionDuration = transitionDuration;\n }\n\n const duration = this.#transitionDuration ?? 0;\n\n header?.classList.add('animating');\n panel.classList.add('animating');\n\n const animation = panel.animate({ height: [`${start}px`, `${end}px`] }, { duration });\n animation.play();\n await animation.finished;\n\n header?.classList.remove('animating');\n panel.classList.remove('animating');\n\n panel.style.removeProperty('height');\n panel.hidden = !panel.expanded;\n }\n }\n\n #onChange(event: AccordionHeaderChangeEvent) {\n if (this.classList.contains('animating')) {\n return;\n }\n\n const index = this.#getIndex(event.target as Element);\n\n if (event.expanded) {\n this.expand(index, event.accordion);\n } else {\n this.collapse(index);\n }\n }\n\n /**\n * @see https://www.w3.org/TR/wai-aria-practices/#accordion\n */\n async #onKeydown(evt: KeyboardEvent) {\n const currentHeader = evt.target as Element;\n\n if (!BaseAccordion.isHeader(currentHeader)) {\n return;\n }\n\n let newHeader: BaseAccordionHeader | undefined;\n\n switch (evt.key) {\n case 'ArrowDown':\n evt.preventDefault();\n newHeader = this.#nextHeader();\n break;\n case 'ArrowUp':\n evt.preventDefault();\n newHeader = this.#previousHeader();\n break;\n case 'Home':\n evt.preventDefault();\n newHeader = this.#firstHeader();\n break;\n case 'End':\n evt.preventDefault();\n newHeader = this.#lastHeader();\n break;\n }\n\n newHeader?.focus?.();\n }\n\n #allHeaders(accordion: BaseAccordion = this): BaseAccordionHeader[] {\n return Array.from(accordion.children).filter(BaseAccordion.isHeader);\n }\n\n #allPanels(accordion: BaseAccordion = this): BaseAccordionPanel[] {\n return Array.from(accordion.children).filter(BaseAccordion.isPanel);\n }\n\n #previousHeader() {\n const { headers } = this;\n const newIndex = headers.findIndex(header => header.matches(':focus,:focus-within')) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n #nextHeader() {\n const { headers } = this;\n const newIndex = headers.findIndex(header => header.matches(':focus,:focus-within')) + 1;\n return headers[newIndex % headers.length];\n }\n\n #firstHeader() {\n return this.headers.at(0);\n }\n\n #lastHeader() {\n return this.headers.at(-1);\n }\n\n #getIndex(el: Element | null) {\n if (BaseAccordion.isHeader(el)) {\n return this.headers.findIndex(header => header.id === el.id);\n }\n\n if (BaseAccordion.isPanel(el)) {\n return this.panels.findIndex(panel => panel.id === el.id);\n }\n\n this.#logger.warn('The #getIndex method expects to receive a header or panel element.');\n return -1;\n }\n\n public updateAccessibility() {\n const { headers } = this;\n\n // For each header in the accordion, attach the aria connections\n headers.forEach(header => {\n const panel = this.#panelForHeader(header);\n if (panel) {\n header.setAttribute('aria-controls', panel.id);\n panel.setAttribute('aria-labelledby', header.id);\n panel.hidden = !panel.expanded;\n }\n });\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n */\n public async toggle(index: number) {\n const { headers } = this;\n const header = headers[index];\n\n if (!header.expanded) {\n await this.expand(index);\n } else {\n await this.collapse(index);\n }\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * Accepts an optional parent accordion to search for headers and panels.\n */\n public async expand(index: number, parentAccordion?: BaseAccordion) {\n if (index === -1) {\n return;\n }\n\n const allHeaders: Array<BaseAccordionHeader> = this.#allHeaders(parentAccordion);\n\n const header = allHeaders[index];\n if (!header) {\n return;\n }\n\n const panel = this.#panelForHeader(header);\n if (!panel) {\n return;\n }\n\n // If the header and panel exist, open both\n this.#expandHeader(header, index),\n this.#expandPanel(panel),\n\n header.focus();\n\n this.dispatchEvent(new AccordionExpandEvent(header, panel));\n\n await this.updateComplete;\n }\n\n /**\n * Expands all accordion items.\n */\n public async expandAll() {\n this.headers.forEach(header => this.#expandHeader(header));\n this.panels.forEach(panel => this.#expandPanel(panel));\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n */\n public async collapse(index: number) {\n const header = this.headers.at(index);\n const panel = this.panels.at(index);\n\n if (!header || !panel) {\n return;\n }\n\n this.#collapseHeader(header);\n this.#collapsePanel(panel);\n\n this.dispatchEvent(new AccordionCollapseEvent(header, panel));\n await this.updateComplete;\n }\n\n /**\n * Collapses all accordion items.\n */\n public async collapseAll() {\n this.headers.forEach(header => this.#collapseHeader(header));\n this.panels.forEach(panel => this.#collapsePanel(panel));\n await this.updateComplete;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"BaseAccordion.js","sourceRoot":"","sources":["BaseAccordion.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { NumberListConverter, ComposedEvent } from '@patternfly/pfe-core';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { AccordionHeaderChangeEvent, BaseAccordionHeader } from './BaseAccordionHeader.js';\nimport { BaseAccordionPanel } from './BaseAccordionPanel.js';\n\nimport style from './BaseAccordion.css';\n\nconst CSS_TIMING_UNITS_RE = /^[0-9.]+(?<unit>[a-zA-Z]+)/g;\n\nexport class AccordionExpandEvent extends ComposedEvent {\n constructor(\n public toggle: BaseAccordionHeader,\n public panel: BaseAccordionPanel,\n ) {\n super('expand');\n }\n}\n\nexport class AccordionCollapseEvent extends ComposedEvent {\n constructor(\n public toggle: BaseAccordionHeader,\n public panel: BaseAccordionPanel,\n ) {\n super('collapse');\n }\n}\n\nexport abstract class BaseAccordion extends LitElement {\n static readonly styles = [style];\n\n static isAccordion(target: EventTarget | null): target is BaseAccordion {\n return target instanceof BaseAccordion;\n }\n\n static isHeader(target: EventTarget | null): target is BaseAccordionHeader {\n return target instanceof BaseAccordionHeader;\n }\n\n static isPanel(target: EventTarget | null): target is BaseAccordionPanel {\n return target instanceof BaseAccordionPanel;\n }\n\n /**\n * Sets and reflects the currently expanded accordion 0-based indexes.\n * Use commas to separate multiple indexes.\n * ```html\n * <pf-accordion expanded-index=\"1,2\">\n * ...\n * </pf-accordion>\n * ```\n */\n @observed(async function expandedIndexChanged(this: BaseAccordion, oldVal: unknown, newVal: unknown) {\n if (oldVal && oldVal !== newVal) {\n await this.collapseAll();\n for (const i of this.expandedIndex) {\n await this.expand(i, this);\n }\n }\n })\n @property({\n attribute: 'expanded-index',\n converter: NumberListConverter\n }) expandedIndex: number[] = [];\n\n get headers() {\n return this.#allHeaders();\n }\n\n get panels() {\n return this.#allPanels();\n }\n\n protected expandedSets = new Set<number>();\n\n #logger = new Logger(this);\n\n #styles = getComputedStyle(this);\n\n #transitionDuration = this.#getAnimationDuration();\n\n // actually is read in #init, by the `||=` operator\n #initialized = false;\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const c = await super.getUpdateComplete();\n const results = await Promise.all([\n ...this.#allHeaders().map(x => x.updateComplete),\n ...this.#allPanels().map(x => x.updateComplete),\n ]);\n return c && results.every(Boolean);\n }\n\n #mo = new MutationObserver(() => this.#init());\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('change', this.#onChange as EventListener);\n this.addEventListener('keydown', this.#onKeydown);\n this.#mo.observe(this, { childList: true });\n this.#init();\n }\n\n render(): TemplateResult {\n return html`\n <slot></slot>\n `;\n }\n\n async firstUpdated() {\n const { headers } = this;\n headers.forEach((header, index) => {\n if (header.expanded) {\n this.#expandHeader(header, index);\n const panel = this.#panelForHeader(header);\n if (panel) {\n this.#expandPanel(panel);\n }\n }\n });\n }\n\n /**\n * Initialize the accordion by connecting headers and panels\n * with aria controls and labels; set up the default disclosure\n * state if not set by the author; and check the URL for default\n * open\n */\n async #init() {\n this.#initialized ||= !!await this.updateComplete;\n this.updateAccessibility();\n }\n\n #panelForHeader(header: BaseAccordionHeader) {\n const next = header.nextElementSibling;\n if (!BaseAccordion.isPanel(next)) {\n return void this.#logger.error('Sibling element to a header needs to be a panel');\n } else {\n return next;\n }\n }\n\n #expandHeader(header: BaseAccordionHeader, index = this.#getIndex(header)) {\n // If this index is not already listed in the expandedSets array, add it\n this.expandedSets.add(index);\n header.expanded = true;\n }\n\n async #expandPanel(panel: BaseAccordionPanel) {\n panel.expanded = true;\n panel.hidden = false;\n\n await panel.updateComplete;\n\n const rect = panel.getBoundingClientRect();\n\n this.#animate(panel, 0, rect.height);\n }\n\n async #collapseHeader(header: BaseAccordionHeader, index = this.#getIndex(header)) {\n if (!this.expandedSets) {\n await this.updateComplete;\n }\n this.expandedSets.delete(index);\n header.expanded = false;\n await header.updateComplete;\n }\n\n async #collapsePanel(panel: BaseAccordionPanel) {\n await panel.updateComplete;\n if (!panel.expanded) {\n return;\n }\n\n const rect = panel.getBoundingClientRect();\n\n panel.expanded = false;\n panel.hidden = true;\n\n this.#animate(panel, rect.height, 0);\n await panel.updateComplete;\n }\n\n #getAnimationDuration(): number {\n if ('computedStyleMap' in this) {\n // @ts-expect-error: https://caniuse.com/?search=computedStyleMap\n return this.computedStyleMap().get('transition-duration')?.to('ms').value;\n } else {\n const { transitionDuration } = this.#styles;\n\n const groups = CSS_TIMING_UNITS_RE.exec(transitionDuration)?.groups;\n\n if (!groups) {\n return 0;\n }\n\n const parsed = parseFloat(transitionDuration);\n\n if (groups.unit === 's') {\n return parsed * 1000;\n } else {\n return parsed;\n }\n }\n }\n\n async #animate(panel: BaseAccordionPanel, start: number, end: number) {\n if (panel) {\n const header = panel.previousElementSibling;\n\n const transitionDuration = this.#getAnimationDuration();\n if (transitionDuration) {\n this.#transitionDuration = transitionDuration;\n }\n\n const duration = this.#transitionDuration ?? 0;\n\n header?.classList.add('animating');\n panel.classList.add('animating');\n\n const animation = panel.animate({ height: [`${start}px`, `${end}px`] }, { duration });\n animation.play();\n await animation.finished;\n\n header?.classList.remove('animating');\n panel.classList.remove('animating');\n\n panel.style.removeProperty('height');\n panel.hidden = !panel.expanded;\n }\n }\n\n #onChange(event: AccordionHeaderChangeEvent) {\n if (this.classList.contains('animating')) {\n return;\n }\n\n const index = this.#getIndex(event.target as Element);\n\n if (event.expanded) {\n this.expand(index, event.accordion);\n } else {\n this.collapse(index);\n }\n }\n\n /**\n * @see https://www.w3.org/TR/wai-aria-practices/#accordion\n */\n async #onKeydown(evt: KeyboardEvent) {\n const currentHeader = evt.target as Element;\n\n if (!BaseAccordion.isHeader(currentHeader)) {\n return;\n }\n\n let newHeader: BaseAccordionHeader | undefined;\n\n switch (evt.key) {\n case 'ArrowDown':\n evt.preventDefault();\n newHeader = this.#nextHeader();\n break;\n case 'ArrowUp':\n evt.preventDefault();\n newHeader = this.#previousHeader();\n break;\n case 'Home':\n evt.preventDefault();\n newHeader = this.#firstHeader();\n break;\n case 'End':\n evt.preventDefault();\n newHeader = this.#lastHeader();\n break;\n }\n\n newHeader?.focus?.();\n }\n\n #allHeaders(accordion: BaseAccordion = this): BaseAccordionHeader[] {\n return Array.from(accordion.children).filter(BaseAccordion.isHeader);\n }\n\n #allPanels(accordion: BaseAccordion = this): BaseAccordionPanel[] {\n return Array.from(accordion.children).filter(BaseAccordion.isPanel);\n }\n\n #previousHeader() {\n const { headers } = this;\n const newIndex = headers.findIndex(header => header.matches(':focus,:focus-within')) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n #nextHeader() {\n const { headers } = this;\n const newIndex = headers.findIndex(header => header.matches(':focus,:focus-within')) + 1;\n return headers[newIndex % headers.length];\n }\n\n #firstHeader() {\n return this.headers.at(0);\n }\n\n #lastHeader() {\n return this.headers.at(-1);\n }\n\n #getIndex(el: Element | null) {\n if (BaseAccordion.isHeader(el)) {\n return this.headers.findIndex(header => header.id === el.id);\n }\n\n if (BaseAccordion.isPanel(el)) {\n return this.panels.findIndex(panel => panel.id === el.id);\n }\n\n this.#logger.warn('The #getIndex method expects to receive a header or panel element.');\n return -1;\n }\n\n public updateAccessibility() {\n const { headers } = this;\n\n // For each header in the accordion, attach the aria connections\n headers.forEach(header => {\n const panel = this.#panelForHeader(header);\n if (panel) {\n header.setAttribute('aria-controls', panel.id);\n panel.setAttribute('aria-labelledby', header.id);\n panel.hidden = !panel.expanded;\n }\n });\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n */\n public async toggle(index: number) {\n const { headers } = this;\n const header = headers[index];\n\n if (!header.expanded) {\n await this.expand(index);\n } else {\n await this.collapse(index);\n }\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * Accepts an optional parent accordion to search for headers and panels.\n */\n public async expand(index: number, parentAccordion?: BaseAccordion) {\n if (index === -1) {\n return;\n }\n\n const allHeaders: Array<BaseAccordionHeader> = this.#allHeaders(parentAccordion);\n\n const header = allHeaders[index];\n if (!header) {\n return;\n }\n\n const panel = this.#panelForHeader(header);\n if (!panel) {\n return;\n }\n\n // If the header and panel exist, open both\n this.#expandHeader(header, index),\n this.#expandPanel(panel),\n\n header.focus();\n\n this.dispatchEvent(new AccordionExpandEvent(header, panel));\n\n await this.updateComplete;\n }\n\n /**\n * Expands all accordion items.\n */\n public async expandAll() {\n this.headers.forEach(header => this.#expandHeader(header));\n this.panels.forEach(panel => this.#expandPanel(panel));\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n */\n public async collapse(index: number) {\n const header = this.headers.at(index);\n const panel = this.panels.at(index);\n\n if (!header || !panel) {\n return;\n }\n\n this.#collapseHeader(header);\n this.#collapsePanel(panel);\n\n this.dispatchEvent(new AccordionCollapseEvent(header, panel));\n await this.updateComplete;\n }\n\n /**\n * Collapses all accordion items.\n */\n public async collapseAll() {\n this.headers.forEach(header => this.#collapseHeader(header));\n this.panels.forEach(panel => this.#collapsePanel(panel));\n await this.updateComplete;\n }\n}\n"]}
|
|
@@ -17,7 +17,7 @@ export class AccordionHeaderChangeEvent extends ComposedEvent {
|
|
|
17
17
|
this.accordion = accordion;
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
|
|
20
|
+
class BaseAccordionHeader extends LitElement {
|
|
21
21
|
constructor() {
|
|
22
22
|
super(...arguments);
|
|
23
23
|
_BaseAccordionHeader_instances.add(this);
|
|
@@ -122,4 +122,5 @@ __decorate([
|
|
|
122
122
|
__decorate([
|
|
123
123
|
property({ reflect: true, attribute: 'heading-tag' })
|
|
124
124
|
], BaseAccordionHeader.prototype, "headingTag", void 0);
|
|
125
|
+
export { BaseAccordionHeader };
|
|
125
126
|
//# sourceMappingURL=BaseAccordionHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseAccordionHeader.js","sourceRoot":"","sources":["BaseAccordionHeader.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;;;AAIpE,MAAM,WAAW,GACf,CAAC,EAAQ,EAAqB,EAAE,CAC9B,EAAE,YAAY,WAAW,IAAI,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AAEjE,MAAM,OAAO,0BAA2B,SAAQ,aAAa;IAC3D,YACS,QAAiB,EACjB,MAA2B,EAC3B,SAAwB;QAE/B,KAAK,CAAC,QAAQ,CAAC,CAAC;QAJT,aAAQ,GAAR,QAAQ,CAAS;QACjB,WAAM,GAAN,MAAM,CAAqB;QAC3B,cAAS,GAAT,SAAS,CAAe;IAGjC,CAAC;CACF;AAED,
|
|
1
|
+
{"version":3,"file":"BaseAccordionHeader.js","sourceRoot":"","sources":["BaseAccordionHeader.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseAccordionHeader.css';\n\nconst isPorHeader =\n (el: Node): el is HTMLElement =>\n el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);\n\nexport class AccordionHeaderChangeEvent extends ComposedEvent {\n constructor(\n public expanded: boolean,\n public toggle: BaseAccordionHeader,\n public accordion: BaseAccordion\n ) {\n super('change');\n }\n}\n\nexport abstract class BaseAccordionHeader extends LitElement {\n static readonly styles = [style];\n\n static override readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n @property({ reflect: true, attribute: 'heading-text' }) headingText?: string;\n\n @property({ reflect: true, attribute: 'heading-tag' }) headingTag?: string;\n\n #generatedHtag?: HTMLHeadingElement;\n\n #logger = new Logger(this);\n\n #header?: HTMLElement;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.#onClick);\n this.hidden = true;\n this.id ||= getRandomId(this.localName);\n this.#initHeader();\n }\n\n async #initHeader() {\n if (this.headingText && !this.headingTag) {\n this.headingTag = 'h3';\n }\n this.#header = this.#getOrCreateHeader();\n\n // prevent double-logging\n if (this.#header !== this.#generatedHtag) {\n this.#generatedHtag = undefined;\n }\n\n do {\n await this.updateComplete;\n } while (!await this.updateComplete);\n\n // Remove the hidden attribute after upgrade\n this.hidden = false;\n }\n\n /** Template hook: before </button> */\n renderAfterButton?(): TemplateResult;\n\n override render(): TemplateResult {\n switch (this.headingTag) {\n case 'h1': return html`<h1 id=\"heading\">${this.#renderHeaderContent()}</h1>`;\n case 'h2': return html`<h2 id=\"heading\">${this.#renderHeaderContent()}</h2>`;\n case 'h3': return html`<h3 id=\"heading\">${this.#renderHeaderContent()}</h3>`;\n case 'h4': return html`<h4 id=\"heading\">${this.#renderHeaderContent()}</h4>`;\n case 'h5': return html`<h5 id=\"heading\">${this.#renderHeaderContent()}</h5>`;\n case 'h6': return html`<h6 id=\"heading\">${this.#renderHeaderContent()}</h6>`;\n default: return this.#renderHeaderContent();\n }\n }\n\n #renderHeaderContent() {\n const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();\n return html`\n <button id=\"button\"\n class=\"toggle\"\n aria-expanded=\"${String(!!this.expanded) as 'true' | 'false'}\">\n <span part=\"text\">${headingText ?? html`\n <slot></slot>`}\n </span>\n ${this.renderAfterButton?.()}\n </button>\n `;\n }\n\n #getOrCreateHeader(): HTMLElement | undefined {\n // Check if there is no nested element or nested textNodes\n if (!this.firstElementChild && !this.firstChild) {\n return void this.#logger.warn('No header content provided');\n } else if (this.firstElementChild) {\n const [heading, ...otherContent] = Array.from(this.children)\n .filter((x): x is HTMLElement => !x.hasAttribute('slot') && isPorHeader(x));\n\n // If there is no content inside the slot, return empty with a warning\n // else, if there is more than 1 element in the slot, capture the first h-tag\n if (!heading) {\n return void this.#logger.warn('No heading information was provided.');\n } else if (otherContent.length) {\n this.#logger.warn('Heading currently only supports 1 tag; extra tags will be ignored.');\n }\n return heading;\n } else {\n if (!this.#generatedHtag) {\n this.#logger.warn('Header should contain at least 1 heading tag for correct semantics.');\n }\n this.#generatedHtag = document.createElement('h3');\n\n // If a text node was provided but no semantics, default to an h3\n // otherwise, incorrect semantics were used, create an H3 and try to capture the content\n if (this.firstChild?.nodeType === Node.TEXT_NODE) {\n this.#generatedHtag.textContent = this.firstChild.textContent;\n } else {\n this.#generatedHtag.textContent = this.textContent;\n }\n\n return this.#generatedHtag;\n }\n }\n\n #onClick(event: MouseEvent) {\n const expanded = !this.expanded;\n const acc = event.composedPath().find(BaseAccordion.isAccordion);\n if (acc) {\n this.dispatchEvent(new AccordionHeaderChangeEvent(expanded, this, acc));\n }\n }\n}\n"]}
|
|
@@ -4,7 +4,7 @@ import { property } from 'lit/decorators/property.js';
|
|
|
4
4
|
import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
|
|
5
5
|
import { css } from "lit";
|
|
6
6
|
const style = css `:host{display:none;overflow:hidden;will-change:height}:host([expanded]){display:block;position:relative}:host(.animating){display:block;transition:height .3s ease-in-out}:host([fixed]){overflow-y:auto}.body{position:relative;overflow:hidden}.body:after{content:"";position:absolute;top:0;bottom:0;left:0}`;
|
|
7
|
-
|
|
7
|
+
class BaseAccordionPanel extends LitElement {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments);
|
|
10
10
|
this.expanded = false;
|
|
@@ -30,4 +30,5 @@ BaseAccordionPanel.styles = [style];
|
|
|
30
30
|
__decorate([
|
|
31
31
|
property({ type: Boolean, reflect: true })
|
|
32
32
|
], BaseAccordionPanel.prototype, "expanded", void 0);
|
|
33
|
+
export { BaseAccordionPanel };
|
|
33
34
|
//# sourceMappingURL=BaseAccordionPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseAccordionPanel.js","sourceRoot":"","sources":["BaseAccordionPanel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;AAIvE,
|
|
1
|
+
{"version":3,"file":"BaseAccordionPanel.js","sourceRoot":"","sources":["BaseAccordionPanel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;AAIvE,MAAa,kBAAmB,SAAQ,UAAU;IAAlD;;QAG8C,aAAQ,GAAG,KAAK,CAAC;IAmB/D,CAAC;IAjBC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAC;QACxC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AApBe,yBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAEW;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAkB;SAHlD,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport style from './BaseAccordionPanel.css';\n\nexport class BaseAccordionPanel extends LitElement {\n static readonly styles = [style];\n\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.id ||= getRandomId(this.localName);\n this.setAttribute('role', 'region');\n }\n\n override render() {\n return html`\n <div tabindex=\"-1\">\n <div id=\"container\" class=\"content\" part=\"container\">\n <div class=\"body\">\n <slot></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-accordion-header.js","sourceRoot":"","sources":["pf-accordion-header.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;;;AAI/D,OAAO,yCAAyC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;
|
|
1
|
+
{"version":3,"file":"pf-accordion-header.js","sourceRoot":"","sources":["pf-accordion-header.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;;;AAI/D,OAAO,yCAAyC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAEH,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,mBAAmB;IAA1D;;QASE,mCAAS,IAAI,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,EAAC;IAcrD,CAAC;IAZC,iBAAiB;QACf,OAAO,IAAI,CAAA,GAAG,CAAC,uBAAA,IAAI,gCAAO,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;;;cAGlD;;wBAEU,IAAI,CAAC,IAAI,IAAI,aAAa;uBAC3B,IAAI,CAAC,OAAO,IAAI,KAAK;;;KAGvC,CAAC;IACJ,CAAC;;;AArBe,wBAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,AAAzC,CAA0C;AAEnC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAA6B;AAE5B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAe;AAES;IAAnD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;kDAAkB;AAP1D,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAuB7B;SAvBY,iBAAiB","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nimport style from './pf-accordion-header.css';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * Accordion Header\n *\n * @csspart text - inline element containing the heading text or slotted heading content\n * @csspart accents - container for accents within the header\n * @csspart icon - caret icon\n *\n * @slot\n * We expect the light DOM of the pf-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)\n * @slot accents\n * These elements will appear inline with the accordion header, between the header and the chevron\n * (or after the chevron and header in disclosure mode).\n *\n * @fires {AccordionHeaderChangeEvent} change - when the open panels change\n *\n * @cssprop {<color>} --pf-c-accordion__toggle--Color\n * Sets the font color for the accordion header.\n * {@default `var(--pf-global--Color--100, #151515)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--BackgroundColor\n * Sets the background color for the accordion header toggle element.\n * {@default `transparent`}\n * @cssprop {<color>} --pf-c-accordion__toggle--after--BackgroundColor\n * Sets the background color for the after element for the accordion header toggle element.\n * {@default `transparent`}\n * @cssprop {<length>} --pf-c-accordion__toggle--PaddingTop\n * Sets the top padding for the accordion header.\n * {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop {<length>} --pf-c-accordion__toggle--PaddingRight\n * Sets the right padding for the accordion header.\n * {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop {<length>} --pf-c-accordion__toggle--PaddingBottom\n * Sets the bottom padding for the accordion header.\n * {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop {<length>} --pf-c-accordion__toggle--PaddingLeft\n * Sets the left padding for the accordion header.\n * {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop {<length>} --pf-c-accordion__toggle--FontSize\n * Sets the sidebar background color for the accordion header.\n * {@default `var(--pf-global--FontSize--lg, 1rem)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--FontFamily\n * Sets the font family for the accordion header.\n * {@default `var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, \"RedHatDisplayUpdated\", helvetica, arial, sans-serif)`}\n * @cssprop --pf-c-accordion__toggle--FontWeight\n * Sets the font weight for the accordion header.\n * {@default `var(--pf-global--FontWeight--normal, 400)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--active--BackgroundColor\n * Sets the active backgrdound color for the accordion header.\n * {@default `var(--pf-global--BackgroundColor--200, #f0f0f0)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--active-text--Color\n * Sets the active text color for the accordion header.\n * {@default `var(--pf-global--link--Color, #0066cc)`}\n * @cssprop --pf-c-accordion__toggle--active-text--FontWeight\n * Sets the active text font weight for the accordion header.\n * {@default `var(--pf-global--FontWeight--semi-bold, 700)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--expanded--before--BackgroundColor\n * Sets the hover expanded before background color for the accordion header.\n * {@default `var(--pf-global--link--Color, #0066cc)`}\n * @cssprop --pf-c-accordion__toggle--expanded-icon--Rotate\n * Sets the expanded icon rotation degrees for the accordion header.\n * {@default `90deg`}\n * @cssprop {<length>} --pf-c-accordion__toggle-text--MaxWidth\n * Sets the max width for the text inside the accordion header.\n * {@default `calc(100% - var(--pf-global--spacer--lg, 1.5rem))`}\n * @cssprop --pf-c-accordion__toggle--before--Width\n * Sets the sidebar width for the accordion header.\n * {@default `var(--pf-global--BorderWidth--lg, 3px)`}\n * @cssprop --pf-c-accordion__toggle-icon--Transition\n * Sets the transition animation for the accordion header.\n * {@default `0.2s ease-in 0s`}\n */\n@customElement('pf-accordion-header')\nexport class PfAccordionHeader extends BaseAccordionHeader {\n static readonly styles = [...BaseAccordionHeader.styles, style];\n\n @property({ reflect: true }) bordered?: 'true' | 'false';\n\n @property({ reflect: true }) icon?: string;\n\n @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n #slots = new SlotController(this, 'accents', null);\n\n renderAfterButton() {\n return html`${!this.#slots.hasSlotted('accents') ? '' : html`\n <span part=\"accents\">\n <slot name=\"accents\"></slot>\n </span>`}\n <pf-icon part=\"icon\"\n icon=\"${this.icon ?? 'angle-right'}\"\n set=\"${this.iconSet ?? 'fas'}\"\n class=\"icon\"\n size=\"lg\"></pf-icon>\n `;\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion-header': PfAccordionHeader;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-accordion-panel.js","sourceRoot":"","sources":["pf-accordion-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;;;AAI7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;
|
|
1
|
+
{"version":3,"file":"pf-accordion-panel.js","sourceRoot":"","sources":["pf-accordion-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;;;AAI7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,kBAAkB;;AACtC,uBAAM,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,KAAK,CAAC,AAAxC,CAAyC;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAA6B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAI5B;SAJY,gBAAgB","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseAccordionPanel } from './BaseAccordionPanel.js';\n\nimport style from './pf-accordion-panel.css';\n\n/**\n * Accordion Panel\n *\n * @slot - Panel content\n * @cssprop {<color>} --pf-c-accordion--BackgroundColor\n * Sets the background color for the panel content.\n * {@default `var(--pf-global--BackgroundColor--light-100, #ffffff)`}\n * @cssprop {<color>} --pf-c-accordion__panel--Color\n * Sets the font color for the panel content.\n * {@default `var(--pf-global--Color--dark-200, #6a6e73)`}\n * @cssprop {<length>} --pf-c-accordion__panel--FontSize\n * Sets the font size for the panel content.\n * {@default `var(--pf-global--FontSize--sm, 0.875rem)`}\n * @cssprop {<color>} --pf-c-accordion__panel--content-body--before--BackgroundColor\n * Sets the sidebar color for the panel when the context is expanded.\n * {@default `var(--pf-global--primary-color--100, #0066cc)`}\n * @cssprop {<length>} --pf-c-accordion__panel--m-fixed--MaxHeight\n * Sets the maximum height for the panel content.\n * Will only be used if the `fixed` attribute is used.\n * {@default `9.375rem`}\n * @cssprop {<length>} --pf-c-accordion__panel-body--PaddingTop\n * Sets the padding top for the panel content.\n * {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop {<length>} --pf-c-accordion__panel-body--PaddingRight\n * Sets the padding right for the panel content.\n * {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop {<length>} --pf-c-accordion__panel-body--PaddingBottom\n * Sets the padding bottom for the panel content.\n * {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop {<length>} --pf-c-accordion__panel-body--PaddingLeft\n * Sets the padding left for the panel content.\n * {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop {<color>} --pf-c-accordion__panel-body--before--BackgroundColor\n * Sets the background color for the panel content.\n * {@default `transparent`}\n * @cssprop --pf-c-accordion__panel-body--before--Width\n * Sets the before width for the panel content.\n * {@default `var(--pf-global--BorderWidth--lg, 3px)`}\n */\n@customElement('pf-accordion-panel')\nexport class PfAccordionPanel extends BaseAccordionPanel {\n static readonly styles = [...BaseAccordionPanel.styles, style];\n\n @property({ reflect: true }) bordered?: 'true' | 'false';\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion-panel': PfAccordionPanel;\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { BaseAccordion } from './BaseAccordion.js';
|
|
|
2
2
|
export * from './pf-accordion-header.js';
|
|
3
3
|
export * from './pf-accordion-panel.js';
|
|
4
4
|
/**
|
|
5
|
-
* An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
|
|
5
|
+
* An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
|
|
6
6
|
*
|
|
7
7
|
* @summary Toggle the visibility of sections of content
|
|
8
8
|
*
|
|
@@ -9,7 +9,7 @@ export * from './pf-accordion-panel.js';
|
|
|
9
9
|
import { css } from "lit";
|
|
10
10
|
const style = css `:host{--accordion__bordered--Color:var(--rh-color-black-300, #d2d2d2);color:var(--pf-global--Color--100,#151515);background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([bordered]) ::slotted(pf-accordion-header:first-child),:host([large]) ::slotted(pf-accordion-header:first-child){display:block;border-top:1px solid var(--accordion__bordered--Color);border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pf-accordion-header:not(:first-child)),:host([large]) ::slotted(pf-accordion-header:not(:first-child)){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pf-accordion-header:is([expanded])),:host([large]) ::slotted(pf-accordion-header:is([expanded])){display:block;border-bottom:0}:host([bordered]) ::slotted(pf-accordion-panel:is([expanded])),:host([large]) ::slotted(pf-accordion-panel:is([expanded])){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}`;
|
|
11
11
|
/**
|
|
12
|
-
* An accordion is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
|
|
12
|
+
* An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.
|
|
13
13
|
*
|
|
14
14
|
* @summary Toggle the visibility of sections of content
|
|
15
15
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;;;AAIxC;;;;;;;;;;;;;;;GAeG;
|
|
1
|
+
{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { observed } from '@patternfly/pfe-core/decorators.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAccordion } from './BaseAccordion.js';\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\n/**\n * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.\n *\n * @summary Toggle the visibility of sections of content\n *\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n *\n *\n * @slot\n * Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n *\n * @cssproperty {<color>} --accordion__bordered--Color\n * Color for the borders between accordion headers when using bordered or large attributes\n * {@default `var(--rh-color-black-300, #d2d2d2)`}\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends BaseAccordion {\n static readonly styles = [...BaseAccordion.styles, style];\n\n /** When true, only one accordion panel may be expanded at a time */\n @property({ reflect: true, type: Boolean }) single = false;\n\n /** Whether to apply the `bordered` style variant */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** Whether to apply the `large` style variant */\n @observed(function largeChanged(this: PfAccordion) {\n [...this.headers, ...this.panels].forEach(el => el.toggleAttribute('large', this.large));\n })\n @property({ type: Boolean, reflect: true }) large = false;\n\n @property({ type: Boolean, reflect: true }) fixed = false;\n\n async firstUpdated() {\n let index: number | null = null;\n if (this.single) {\n const allHeaders = [...this.querySelectorAll('pf-accordion-header')];\n const lastExpanded = allHeaders.filter(x => x.hasAttribute('expanded')).pop();\n if (lastExpanded) {\n index = allHeaders.indexOf(lastExpanded);\n }\n }\n await super.firstUpdated();\n if (index !== null) {\n this.headers.forEach((_, i) => {\n this.headers.at(i)?.toggleAttribute('expanded', i === index);\n this.panels.at(i)?.toggleAttribute('expanded', i === index);\n });\n }\n }\n\n override async expand(index: number, parentAccordion?: BaseAccordion) {\n if (index === -1) {\n return;\n }\n\n const allHeaders: Array<BaseAccordionHeader> = this.headers;\n\n // Get all the headers and capture the item by index value\n if (this.single) {\n await Promise.all([\n ...allHeaders.map((header, index) => header.expanded && this.collapse(index)),\n ]);\n }\n\n await super.expand(index, parentAccordion);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion': PfAccordion;\n }\n}\n"]}
|
package/pf-avatar/BaseAvatar.js
CHANGED
|
@@ -15,7 +15,7 @@ export class AvatarLoadEvent extends Event {
|
|
|
15
15
|
*
|
|
16
16
|
* @summary For displaying a user's avatar image
|
|
17
17
|
*/
|
|
18
|
-
|
|
18
|
+
class BaseAvatar extends LitElement {
|
|
19
19
|
constructor() {
|
|
20
20
|
super(...arguments);
|
|
21
21
|
/** The alt text for the avatar image. */
|
|
@@ -59,4 +59,5 @@ __decorate([
|
|
|
59
59
|
__decorate([
|
|
60
60
|
property({ type: Boolean, reflect: true })
|
|
61
61
|
], BaseAvatar.prototype, "dark", void 0);
|
|
62
|
+
export { BaseAvatar };
|
|
62
63
|
//# sourceMappingURL=BaseAvatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseAvatar.js","sourceRoot":"","sources":["BaseAvatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QADhC,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAED;;;;;GAKG;AAEH,
|
|
1
|
+
{"version":3,"file":"BaseAvatar.js","sourceRoot":"","sources":["BaseAvatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QADhC,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAED;;;;;GAKG;AAEH,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAME,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;QAEpE,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;IAsB3D,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;eAEnB,IAAI,CAAC,IAAI;cACV,IAAI,CAAC,GAAG,IAAI,EAAE;iBACX,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;cAC3D,IAAI,CAAC,GAAG;KACjB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;KAKnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;AAjCe,iBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAGrB;IAAX,QAAQ,EAAE;uCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAwC;AAGxB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAc;SAb9C,UAAU","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './BaseAvatar.css';\n\nexport class AvatarLoadEvent extends Event {\n constructor(public originalEvent: Event) {\n super('load', { bubbles: true, composed: true });\n }\n}\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n\nexport class BaseAvatar extends LitElement {\n static readonly styles = [style];\n\n /** The URL to the user's custom avatar image. */\n @property() src?: string;\n\n /** The alt text for the avatar image. */\n @property({ reflect: true }) alt?: string = 'Avatar image';\n\n /** Size of the Avatar */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /** Whether or not the Avatar image is dark */\n @property({ type: Boolean, reflect: true }) dark = false;\n\n render() {\n return this.src != null ? html`\n <img\n size=${this.size}\n alt=${this.alt ?? ''}\n @load=\"${(e: Event) => this.dispatchEvent(new AvatarLoadEvent(e))}\"\n src=${this.src}>\n ` : this.dark ? html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n </svg>\n ` : html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n </svg>\n `;\n }\n}\n"]}
|
package/pf-avatar/pf-avatar.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseAvatar } from './BaseAvatar.js';
|
|
2
2
|
/**
|
|
3
|
-
* An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.
|
|
3
|
+
* An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
|
|
4
4
|
*
|
|
5
5
|
* @summary For displaying a user's avatar image
|
|
6
6
|
*/
|
package/pf-avatar/pf-avatar.js
CHANGED
|
@@ -5,7 +5,7 @@ import { BaseAvatar } from './BaseAvatar.js';
|
|
|
5
5
|
import { css } from "lit";
|
|
6
6
|
const style = css `img,svg{width:var(--pf-c-avatar--Width,24px);height:var(--pf-c-avatar--Height,24px);border-radius:var(--pf-c-avatar--BorderRadius,var(--pf-global--BorderRadius--lg,128px));border:var(--pf-c-avatar--BorderWidth,0) solid var(--pf-c-avatar--BorderColor,var(--pf-global--BorderColor--dark-100,#d2d2d2))}:host([border]) :is(img,svg){--pf-c-avatar--BorderWidth:var(--pf-global--BorderWidth--sm, 1px)}:host([border=dark]) :is(img,svg){--pf-c-avatar--BorderColor:var(--pf-c-avatar--m-dark--BorderColor,\n var(--pf-global--palette--black-700, #4f5255))}:host([size=sm]){--pf-c-avatar--Width:var(--pf-c-avatar--m-sm--Width, 24px);--pf-c-avatar--Height:var(--pf-c-avatar--m-sm--Height, 24px)}:host([size=md]){--pf-c-avatar--Width:var(--pf-c-avatar--m-md--Width, 36px);--pf-c-avatar--Height:var(--pf-c-avatar--m-md--Height, 36px)}:host([size=lg]){--pf-c-avatar--Width:var(--pf-c-avatar--m-lg--Width, 72px);--pf-c-avatar--Height:var(--pf-c-avatar--m-lg--Height, 72px)}:host([size=xl]){--pf-c-avatar--Width:var(--pf-c-avatar--m-xl--Width, 128px);--pf-c-avatar--Height:var(--pf-c-avatar--m-xl--Height, 128px)}`;
|
|
7
7
|
/**
|
|
8
|
-
* An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.
|
|
8
|
+
* An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
|
|
9
9
|
*
|
|
10
10
|
* @summary For displaying a user's avatar image
|
|
11
11
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;GAIG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAGE,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;IAItE,CAAC;;AAPiB,eAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAP5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB;SARY,QAAQ","sourcesContent":["import { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n static readonly styles = [style];\n\n /** Size of the Avatar */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /** Whether to display a border around the avatar */\n @property({ reflect: true }) border?: 'light' | 'dark';\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-avatar': PfAvatar;\n }\n}\n"]}
|
package/pf-badge/BaseBadge.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement, html } from 'lit';
|
|
2
2
|
import { css } from "lit";
|
|
3
3
|
const style = css `:host{position:relative;white-space:nowrap;text-align:center;display:inline-block}`;
|
|
4
|
-
|
|
4
|
+
class BaseBadge extends LitElement {
|
|
5
5
|
render() {
|
|
6
6
|
const { threshold, number, textContent } = this;
|
|
7
7
|
const displayText = (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
|
|
@@ -13,4 +13,5 @@ export class BaseBadge extends LitElement {
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
BaseBadge.styles = [style];
|
|
16
|
+
export { BaseBadge };
|
|
16
17
|
//# sourceMappingURL=BaseBadge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseBadge.js","sourceRoot":"","sources":["BaseBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,
|
|
1
|
+
{"version":3,"file":"BaseBadge.js","sourceRoot":"","sources":["BaseBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,MAAsB,SAAU,SAAQ,UAAU;IAmBvC,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAChD,MAAM,WAAW,GACb,CAAC,SAAS,IAAI,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,EAAE,GAAG;YAC5E,CAAC,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACtC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC;QACtB,OAAO,IAAI,CAAA;cACD,WAAW;KACpB,CAAC;IACJ,CAAC;;AA3Be,gBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;SADb,SAAS","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseBadge.css';\n\nexport abstract class BaseBadge extends LitElement {\n static readonly styles = [style];\n\n abstract state?: string;\n\n /**\n * Sets a numeric value for a badge.\n *\n * You can pair it with `threshold` attribute to add a `+` sign\n * if the number exceeds the threshold value.\n */\n abstract number?: number;\n\n /**\n * Sets a threshold for the numeric value and adds `+` sign if\n * the numeric value exceeds the threshold value.\n */\n abstract threshold?: number;\n\n override render() {\n const { threshold, number, textContent } = this;\n const displayText =\n (threshold && number && (threshold < number)) ? `${threshold.toString()}+`\n : (number != null) ? number.toString()\n : textContent ?? '';\n return html`\n <span>${displayText}</span>\n `;\n }\n}\n"]}
|
package/pf-badge/pf-badge.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseBadge } from './BaseBadge.js';
|
|
2
2
|
/**
|
|
3
|
-
* A badge is used to annotate other information like a label or an object name.
|
|
3
|
+
* A **badge** is used to annotate other information like a label or an object name.
|
|
4
4
|
*
|
|
5
5
|
* @cssprop {<length>} --pf-c-badge--BorderRadius {@default `180em`}
|
|
6
6
|
*
|
package/pf-badge/pf-badge.js
CHANGED
|
@@ -5,7 +5,7 @@ import { BaseBadge } from './BaseBadge.js';
|
|
|
5
5
|
import { css } from "lit";
|
|
6
6
|
const styles = css `:host{border-radius:var(--pf-c-badge--BorderRadius,var(--pf-global--BorderRadius--lg,180em));min-width:var(--pf-c-badge--MinWidth,var(--pf-global--spacer--xl,2rem));padding-left:var(--pf-c-badge--PaddingLeft,var(--pf-global--spacer--sm,.5rem));padding-right:var(--pf-c-badge--PaddingRight,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-badge--FontSize,\n var(--pf-theme--font-size, .75em));font-weight:var(--pf-c-badge--FontWeight,var(--pf-theme--font-weight--bold,700));line-height:var(--pf-c-badge--LineHeight,\n var(--pf-global--LineHeight--md, 1.5));color:var(--pf-c-badge--Color,var(--pf-global--palette--black-900,#151515));background-color:var(--pf-c-badge--BackgroundColor,var(--pf-global--palette--black-200,#f0f0f0))}:host([state=read]){--pf-c-badge--Color:var(--pf-c-badge--m-read--Color,\n var(--pf-global--palette--black-900, #151515));--pf-c-badge--BackgroundColor:var(--pf-c-badge--m-read--BackgroundColor,\n var(--pf-global--palette--black-200, #f0f0f0))}:host([state=unread]){--pf-c-badge--Color:var(--pf-c-badge--m-unread--Color,\n var(--pf-global--palette--white, #fff));--pf-c-badge--BackgroundColor:var(--pf-c-badge--m-unread--BackgroundColor,\n var(--pf-global--palette--blue-400, #06c))}`;
|
|
7
7
|
/**
|
|
8
|
-
* A badge is used to annotate other information like a label or an object name.
|
|
8
|
+
* A **badge** is used to annotate other information like a label or an object name.
|
|
9
9
|
*
|
|
10
10
|
* @cssprop {<length>} --pf-c-badge--BorderRadius {@default `180em`}
|
|
11
11
|
*
|
package/pf-badge/pf-badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;
|
|
1
|
+
{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,SAAS;;AACpB,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;AAM1B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA2B;AAEZ;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAEhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AAXnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAYnB;SAZY,OAAO","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseBadge } from './BaseBadge.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A **badge** is used to annotate other information like a label or an object name.\n *\n * @cssprop {<length>} --pf-c-badge--BorderRadius {@default `180em`}\n *\n * @cssprop {<length>} --pf-c-badge--MinWidth {@default `2rem`}\n *\n * @cssprop {<length>} --pf-c-badge--PaddingLeft {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-badge--PaddingRight {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-badge--FontSize {@default `0.85em`}\n * @cssprop {<length>} --pf-c-badge--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-badge--FontWeight {@default `700`}\n *\n * @cssprop {<color>} --pf-c-badge--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--BackgroundColor {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-read--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-unread--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor {@default `#06c`}\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends BaseBadge {\n static readonly styles = [...BaseBadge.styles, styles];\n\n /**\n * Denotes the state-of-affairs this badge represents\n * Options include read and unread\n */\n @property({ reflect: true }) state?: 'unread' | 'read';\n\n @property({ reflect: true, type: Number }) number?: number;\n\n @property({ reflect: true, type: Number }) threshold?: number;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-badge': PfBadge;\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import type { TemplateResult } from 'lit';
|
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
3
|
/**
|
|
4
4
|
* Base button class
|
|
5
|
-
*
|
|
5
|
+
* @csspart button - Internal button element
|
|
6
6
|
* @csspart icon - Container for the icon slot
|
|
7
7
|
* @slot icon
|
|
8
8
|
* Contains the button's icon or state indicator, e.g. a spinner.
|
package/pf-button/BaseButton.js
CHANGED
|
@@ -9,14 +9,14 @@ import { css } from "lit";
|
|
|
9
9
|
const styles = css `:host{display:inline-block;height:max-content}:host([hidden]){display:none!important}[hidden]{display:none!important}button{cursor:pointer;position:relative;font-family:inherit}button{border-width:0;border-style:solid}button::after{position:absolute;inset:0 0 0 0;content:"";border-style:solid}:host(:is(:disabled,[aria-disabled=true])),:host(:is(:disabled,[aria-disabled=true])) #container,:host(:is(:disabled,[aria-disabled=true])) button,:host(:is(:disabled,[aria-disabled=true])[danger]) button,:host(:is(:disabled,[aria-disabled=true])[variant=link]) button{pointer-events:none;cursor:default}[part=icon]{display:none;pointer-events:none}.hasIcon{position:relative;display:flex;align-items:center}.hasIcon [part=icon]{display:inline-flex;align-items:center;position:absolute;width:16px}:host(:not([disabled])) .hasIcon [part=icon]{cursor:pointer}[part=icon] ::slotted(*){width:16px;max-width:16px;height:16px;max-height:16px}.hasIcon button{position:absolute;inset:0}`;
|
|
10
10
|
/**
|
|
11
11
|
* Base button class
|
|
12
|
-
*
|
|
12
|
+
* @csspart button - Internal button element
|
|
13
13
|
* @csspart icon - Container for the icon slot
|
|
14
14
|
* @slot icon
|
|
15
15
|
* Contains the button's icon or state indicator, e.g. a spinner.
|
|
16
16
|
* @slot
|
|
17
17
|
* Must contain exactly one `<button>` element as the only content not assigned to a named slot.
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
class BaseButton extends LitElement {
|
|
20
20
|
constructor() {
|
|
21
21
|
super(...arguments);
|
|
22
22
|
_BaseButton_instances.add(this);
|
|
@@ -30,10 +30,11 @@ export class BaseButton extends LitElement {
|
|
|
30
30
|
render() {
|
|
31
31
|
const { hasIcon } = this;
|
|
32
32
|
return html `
|
|
33
|
-
<button
|
|
33
|
+
<button aria-label="${ifDefined(this.label)}"
|
|
34
34
|
class="${classMap({ hasIcon })}"
|
|
35
|
+
part="button"
|
|
36
|
+
type="${ifDefined(this.type)}"
|
|
35
37
|
value="${ifDefined(this.value)}"
|
|
36
|
-
aria-label="${ifDefined(this.label)}"
|
|
37
38
|
@click="${__classPrivateFieldGet(this, _BaseButton_instances, "m", _BaseButton_onClick)}"
|
|
38
39
|
?disabled="${this.disabled || __classPrivateFieldGet(this, _BaseButton_internals, "f").formDisabled}">
|
|
39
40
|
<slot id="icon" part="icon" aria-hidden="true" name="icon">${this.renderDefaultIcon()}</slot>
|
|
@@ -75,4 +76,5 @@ __decorate([
|
|
|
75
76
|
__decorate([
|
|
76
77
|
property()
|
|
77
78
|
], BaseButton.prototype, "icon", void 0);
|
|
79
|
+
export { BaseButton };
|
|
78
80
|
//# sourceMappingURL=BaseButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAG/F;;;;;;;;GAQG;AACH,
|
|
1
|
+
{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAG/F;;;;;;;;GAQG;AACH,MAAsB,UAAW,SAAQ,UAAU;IAAnD;;;QAOE,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAwB7D,gCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IA6C7C,CAAC;IA3CC,IAAc,OAAO;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,OAAO,IAAI,CAAA;4BACa,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;uBAC1B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;;sBAEtB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;wBACpB,uBAAA,IAAI,kDAAS;2BACV,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,6BAAW,CAAC,YAAY;qEACH,IAAI,CAAC,iBAAiB,EAAE;sCACvD,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAqB;;KAEzE,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,oBAAoB;QAClC,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;IAGC,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,OAAO;YACV,OAAO,uBAAA,IAAI,6BAAW,CAAC,KAAK,EAAE,CAAC;QACjC;YACE,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAM,EAAE,CAAC;KACnC;AACH,CAAC;AAjEe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAElB,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,4BAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5E,CAA6E;AAGlE;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAsC;AAGtD;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;wCAAe;AAGd;IAAX,QAAQ,EAAE;wCAAe;SApBN,UAAU","sourcesContent":["import type { TemplateResult } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport styles from './BaseButton.css';\n\n/**\n * Base button class\n * @csspart button - Internal button element\n * @csspart icon - Container for the icon slot\n * @slot icon\n * Contains the button's icon or state indicator, e.g. a spinner.\n * @slot\n * Must contain exactly one `<button>` element as the only content not assigned to a named slot.\n */\nexport abstract class BaseButton extends LitElement {\n static readonly styles = [styles];\n\n static readonly formAssociated = true;\n\n static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n /** Disables the button */\n @property({ reflect: true, type: Boolean }) disabled = false;\n\n @property({ reflect: true }) type?: 'button' | 'submit' | 'reset';\n\n /** Accessible name for the button, use when the button does not have slotted text */\n @property() label?: string;\n\n @property() value?: string;\n\n @property() name?: string;\n\n /** Shorthand for the `icon` slot, the value is icon name */\n @property() icon?: string;\n\n /** Changes the size of the button. */\n abstract size?: string;\n\n /**\n * Use danger buttons for actions a user can take that are potentially\n * destructive or difficult/impossible to undo, like deleting or removing\n * user data.\n */\n abstract danger: unknown;\n\n #internals = new InternalsController(this);\n\n protected get hasIcon() {\n return !!this.icon;\n }\n\n override render() {\n const { hasIcon } = this;\n return html`\n <button aria-label=\"${ifDefined(this.label)}\"\n class=\"${classMap({ hasIcon })}\"\n part=\"button\"\n type=\"${ifDefined(this.type)}\"\n value=\"${ifDefined(this.value)}\"\n @click=\"${this.#onClick}\"\n ?disabled=\"${this.disabled || this.#internals.formDisabled}\">\n <slot id=\"icon\" part=\"icon\" aria-hidden=\"true\" name=\"icon\">${this.renderDefaultIcon()}</slot>\n <slot id=\"text\" aria-hidden=${String(!!this.label) as 'true' | 'false'}></slot>\n </button>\n `;\n }\n\n protected async formDisabledCallback() {\n await this.updateComplete;\n this.requestUpdate();\n }\n\n #onClick() {\n switch (this.type) {\n case 'reset':\n return this.#internals.reset();\n default:\n return this.#internals.submit();\n }\n }\n\n /**\n * Fallback content for the icon slot. When the `icon` attribute is set, it\n * should render an icon corresponding to the value.\n *\n * @example ```html\n * <base-icon icon=${this.icon}></base-icon>\n * ```\n */\n protected abstract renderDefaultIcon(): TemplateResult;\n}\n"]}
|
package/pf-button/pf-button.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
|
|
|
3
3
|
import '@patternfly/elements/pf-spinner/pf-spinner.js';
|
|
4
4
|
export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' | 'link');
|
|
5
5
|
/**
|
|
6
|
-
* A button is a box area or text that communicates and triggers user actions when
|
|
6
|
+
* A **button** is a box area or text that communicates and triggers user actions when
|
|
7
7
|
* clicked or selected. Buttons can be used to communicate and immediately trigger
|
|
8
8
|
* actions a user can take in an application, like submitting a form, canceling a
|
|
9
9
|
* process, or creating a new object. Buttons can also be used to take a user to a
|