@dbp-toolkit/common
Version:
You can provide attributes (e.g. `global-name`) for components inside the provider:
829 lines (776 loc) • 67.2 kB
JavaScript
import{A as e,C as t,D as n,E as r,O as i,S as a,T as o,_ as s,a as c,b as l,c as u,d,f,g as p,h as m,i as h,k as g,l as _,m as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T,v as E,w as D,x as O,y as k}from"./shared/src.DwXCq60-.js";var A=class extends s(t(D),g){constructor(){super(),this.entryPointUrl=``}static get scopedElements(){return{"dbp-icon":l,"dbp-button":f,"dbp-modal":p}}static get properties(){return{...super.properties,entryPointUrl:{type:String,attribute:`entry-point-url`}}}static get styles(){return i`
${k()}
.content h2 {
color: var(--dbp-content);
font-weight: 600;
line-height: 1.125;
margin-top: 2em;
font-size: 1.5em;
margin-bottom: 0.75em;
}
.content h3 {
color: var(--dbp-content);
font-weight: 600;
line-height: 1.125;
margin-top: 1.5em;
font-size: 1.25em;
margin-bottom: 0.5em;
}
.control {
margin-bottom: 1.5rem;
}
.control:not(:last-child) {
margin-bottom: 0.5rem;
}
dbp-modal .header {
display: flex;
margin-bottom: 1em;
}
dbp-modal .footer-menu {
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
gap: 1em;
padding-top: 1em;
}
.modal--basic {
--dbp-modal-content-min-height: 6em;
--dbp-modal-max-width: 650px;
}
.modal--basic .header h3 {
margin: 0 1em 0 0;
}
.modal--long {
--dbp-modal-header-height: 110px;
--dbp-modal-footer-height: 3em;
--dbp-modal-max-width: 50vw;
--dbp-modal-max-height: 80vh;
}
.modal--long .header h4,
.modal--long .header h3 {
margin: 0 1em 0 0;
}
.modal--sticky {
--dbp-modal-header-height: 110px;
--dbp-modal-footer-height: 3em;
--dbp-modal-max-width: 50vw;
--dbp-modal-max-height: 80vh;
}
.modal--sticky .header h4,
.modal--sticky .header h3 {
margin: 0 1em 0 0;
}
.header {
display: flex;
align-items: center;
}
`}render(){return n`
<div class="content">
<h2>Modal component</h2>
<div class="control">
<h3>Basic Modal (with fade-in effect)</h3>
<dbp-button
type="is-primary"
id="modal-trigger-basic"
value="open modal"
no-spinner-on-click
@click="${()=>this._(`#my-modal-basic`).open()}"></dbp-button>
<dbp-modal
id="my-modal-basic"
class="modal modal--basic"
modal-id="modal-basic"
title="The title of the modal"
subscribe="lang">
<div slot="header" class="header">
<h3>Person name</h3>
<dbp-icon name="cog"></dbp-icon>
</div>
<div slot="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<menu slot="footer" class="footer-menu">
<dbp-button
@click="${()=>{this._(`#my-modal-basic`).close()}}">
Cancel
</dbp-button>
<dbp-button type="is-primary">Submit</dbp-button>
</menu>
</dbp-modal>
</div>
<div class="control">
<h3>Modal with long content</h3>
<dbp-button
type="is-primary"
id="modal-trigger-long"
value="open modal"
no-spinner-on-click
@click="${()=>this._(`#my-modal-long`).open()}"></dbp-button>
<dbp-modal
id="my-modal-long"
class="modal modal--long"
modal-id="modal-long"
title="The title of the modal"
subscribe="lang">
<div slot="header" class="header">
<div class="top">
<h3>Person name</h3>
<dbp-icon name="cog"></dbp-icon>
</div>
<div class="bottom">
<h4>Other Person name</h4>
<dbp-icon name="ambulance"></dbp-icon>
</div>
</div>
<div slot="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h4>Exercitation</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h4>Consectetur</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h5>Eiusmod</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h4>Incididunt</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h5>Consequat</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<menu slot="footer" class="footer-menu">
<dbp-button
@click="${()=>{this._(`#my-modal-long`).close()}}">
Cancel
</dbp-button>
<dbp-button type="is-primary">Submit</dbp-button>
</menu>
</dbp-modal>
</div>
<div class="control">
<h3>Modal with sticky footer</h3>
<dbp-button
type="is-primary"
id="modal-trigger-sticky"
value="open modal"
no-spinner-on-click
@click="${()=>this._(`#my-modal-sticky`).open()}"></dbp-button>
<dbp-modal
id="my-modal-sticky"
sticky-footer
class="modal modal--sticky"
modal-id="modal-sticky"
title="The title of the modal"
subscribe="lang">
<div slot="header" class="header">
<div class="top">
<h3>Person name</h3>
<dbp-icon name="cog"></dbp-icon>
</div>
<div class="bottom">
<h4>Other Person name</h4>
<dbp-icon name="ambulance"></dbp-icon>
</div>
</div>
<div slot="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h4>Exercitation</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h4>Consectetur</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h5>Eiusmod</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h4>Incididunt</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<h5>Consequat</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<menu slot="footer" class="footer-menu">
<dbp-button
@click="${()=>{this._(`#my-modal-sticky`).close()}}">
Cancel
</dbp-button>
<dbp-button type="is-primary">Submit</dbp-button>
</menu>
</dbp-modal>
</div>
</div>
`}},j=class extends s(t(D),g){static get scopedElements(){return{"dbp-button":f,"dbp-icon-button":x,"dbp-loading-button":v}}static get styles(){return i`
${k()}
.content h2 {
color: var(--dbp-content);
font-weight: 600;
line-height: 1.125;
margin-top: 2em;
font-size: 1.5em;
margin-bottom: 0.75em;
}
.control {
margin-bottom: 1.5rem;
}
.control:not(:last-child) {
margin-bottom: 0.5rem;
}
`}buttonClickHandler(e){e.target.classList.add(`button-clicked`),setTimeout(()=>{this.shadowRoot.querySelectorAll(`dbp-button`).forEach(e=>{e.stop()})},1e3)}loadingButtonClickHandler(e){let t=e.target;t.start(),setTimeout(()=>{t.stop()},1e3)}render(){return n`
<div class="content">
<h2>Button</h2>
<div class="control">
<dbp-button
value="Primary"
@click="${this.buttonClickHandler}"
type="is-primary"></dbp-button>
<dbp-button value="No type" @click="${this.buttonClickHandler}"></dbp-button>
<dbp-button
value="Secondary"
@click="${this.buttonClickHandler}"
type="is-secondary"></dbp-button>
<dbp-button
value="Danger"
@click="${this.buttonClickHandler}"
type="is-danger"></dbp-button>
<dbp-button
value="Warning"
@click="${this.buttonClickHandler}"
type="is-warning"></dbp-button>
<dbp-button
value="Success"
@click="${this.buttonClickHandler}"
type="is-success"></dbp-button>
<dbp-button
value="Info"
@click="${this.buttonClickHandler}"
type="is-info"></dbp-button>
<br />
<br />
<dbp-button
value="Small primary"
@click="${this.buttonClickHandler}"
type="is-small is-primary"></dbp-button>
<dbp-button
value="Small secondary"
@click="${this.buttonClickHandler}"
type="is-small is-secondary"></dbp-button>
<br />
<br />
<dbp-loading-button
@click="${this.loadingButtonClickHandler}"
type="is-primary">
Loading Button
</dbp-loading-button>
<dbp-loading-button
@click="${this.loadingButtonClickHandler}"
type="is-primary"
disabled>
Loading Button Disabled
</dbp-loading-button>
<br />
<br />
<dbp-icon-button
icon-name="checkmark-circle"
aria-label="Click to approve this changes"
title="Enter input"></dbp-icon-button>
<dbp-icon-button
icon-name="chrome"
aria-label="Select your browser"
title="Enter input"></dbp-icon-button>
<dbp-icon-button
icon-name="steam"
aria-label="Play games by pressing this button"
title="Enter input"></dbp-icon-button>
<dbp-icon-button
icon-name="bug"
title="No aria-label defined"></dbp-icon-button>
</div>
</div>
`}},M=`shortcode.stethoscope.alarm-clock.cloudnetwork.angle-double-down.highlight-alt.alarm.certificate.bootstrap.google.briefcase.stamp.stats-up.plane.git.mouse.grow.cloud-sync.display.protection.arrow-up-circle.star-half.chevron-left.skype.shield.underline.smile.files.search.caravan.pointer-down.syringe.text-allign-right.cloud-check.facebook-original.dinner.amazon-original.layout.ruler-alt.frame-expand.book.target-audience.pointer-right.slim.eraser.twitch.html.nextcloud.500px.helmet.thunder-alt.sun.coffee-cup.stop.download.reload.write.night.basketball.linkedin-filled.cross-circle.lock.thumbs-up.mastercard.brush-alt.zoom-out.offer.indent-decrease.spell-check.bubble.dropbox.cart-full.map.cut.vk.teabag.money-protection.twitter-filled.code-alt.instagram-original.rocket.tounge.sort-amount-asc.star.slack.tag.invest-monitor.pyramids.seo-consulting.trees.dollar.bookmark-alt.flower.facebook.pin-alt.ticket.comments.target-revenue.mashroom.google-plus-original.whatsapp.italic.warning-high.phone-handset.arrow-right.facebook-filled.shift-left.download-complete.rupee.bridge.train-alt.shift-right.contrast.paypal-original.snapchat.candy.world.funnel.instagram.surfboard.t-shirt.bolt.more-filled.flickr.weight.cloud.edit-permission.direction.pointer-left.camera.seo-monitoring.twitter-original.pin.clipboard.tree.share.wheelbarrow.burger.text-allign-left.home.rss-feed.diamond.scroll-down.medall-alt.customer.key.behance-original.amex.bluetooth.cart.edit-pencil.calculator.tab.cog.road.drupal-original.behance.sad.zip.arrow-left.stripe.car-alt.shuffle.revenue.chevron-up.postcard.android.euro.school-bench-alt.credit-cards.thumbs-down.na.facebook-messenger.school-bench.laptop-phone.dropbox-original.flag.ambulance.train.bar-chart.wheelchair.circle-minus.checkmark-circle.scooter.folder.crown.menu-dots.bulb.question-circle.music.arrow-down-circle.happy.infinite.text-allign-center.bug.arrow-top-left.exit-down.upload.library.pie-chart.school-compass.mobile.island.spinner-arrow.text-size.vector.domain.zoom-in.undo.agenda.blogger.joomla.open-new-window.line-double.unlink.pagination.grid-alt.information.pulse.close.drupal.text-allign-justify.unlock.investment.power-switch.skipping-rope.line-spacing.brick.bi-cycle.send-diagonal.github.notepad.chevron-down-circle.save.candy-cane.vimeo.chevron-right.dribbble.service.empty-file.inbox.wallet.minus.cup.spotify-original.layers.reply.remove-file.restaurant.chef-hat.volume-medium.share2.black-board.yen.text-format.eye.first-aid.plug.ycombinator.mute.keyword-research.arrow-top-right.network.quotation.yahoo.ruler.travel.friendly.thought.exit.producthunt.flags.standard.bitbucket.wechat.volume.play.ux.arrows-vertical.more.exit-up.stackoverflow.ship.delete-selection.arrow-down.line-dashed.slice.signal.medall.magnet.pencil-alt.ticketalt.mic.pilcrow.cloud-download.pinterest.hospital.coin.thunder.wide.sprout.paper-clip.printer.move.indent-increase.target.instagram-filled.brush.shopify.dumbbell.wordpress-filled.archive.java.pizza.telegram.envato.pound.soundcloud.rain.fireworks.taxi.arrow-left-circle.spinner.licencse.page-break.bookmark.timer.warning.database.code.apple.comments-reply.angle-double-up.money-location.linkedin-original.help.dashboard.microscope.pointer.microsoft.lineicons-alt.construction.headphone-alt.list.paint-bucket.shovel.source_icons_eye-off.visa.trash.users.megento.headphone.radio-button.user.source_icons_eye-empty.capsule.menu.cloudy-sun.chrome.construction-hammer.bolt-alt.android-original.package.star-filled.backward.apartment.paint-roller.harddrive.heart-monitor.seo.display-alt.windows.heart.ruler-pencil.website.lineicons-original.chevron-left-circle.spray.sort-alpha-asc.direction-alt.add-file.popup.line-dotted.direction-rtl.bullhorn.steam.delivery.suspect.cool.direction-ltr.forward.select.shopping-basket.source_icons_align-justify.star-empty.video.arrows-horizontal.image.pointer-up.map-marker.linkedin.github-original.comments-alt.medium.highlight.angle-double-right.chevron-down.bus-alt.game.reddit.strikethrough.link.volume-high.cloud-upload.keyboard.helicopter.hammer.enter.full screen.plus.pencil.arrow-up.twitter.spinner-arrow-mirrored.bus.wordpress.phone.gallery.souncloud-original.hourglass.firefox.line.graduation.chevron-right-circle.panel.spotify.information-circle.text-format-remove.hand.car.baloon.trowel.invention.checkmark.anchor.quora.fresh-juice.drop.cake.pallet.laptop.slideshare.bold.angle-double-left.gift.playstore.bitcoin.envelope.lineicons.pause.leaf.chevron-up-circle.css.volume-low.iconoir_settings.support.neutral.microphone.heart-filled.paypal.handshake.stats-down.grid.youtube.juice.amazon.crop.spinner-solid.arrow-right-circle.checkbox.share-alt.calendar.magnifier`.split(`.`),N=class extends r{constructor(){super(),this._isVisible=!1,this._observer=null}static get properties(){return{_isVisible:{type:Boolean,state:!0},rootMargin:{type:String,attribute:`root-margin`},threshold:{type:Number}}}static get styles(){return i`
:host {
display: block;
}
`}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this._setupIntersectionObserver()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanupObserver()}_setupIntersectionObserver(){this._observer=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(this._isVisible=!0,this._cleanupObserver())})},{rootMargin:this.rootMargin||`50px`,threshold:this.threshold||.01}),this._observer.observe(this)}_cleanupObserver(){this._observer&&=(this._observer.disconnect(),null)}render(){return this._isVisible?n`
<slot></slot>
`:n`
<span class="placeholder"></span>
`}},P=class extends s(t(D),g){static get scopedElements(){return{"dbp-icon":l,"lazy-load":N}}static get properties(){return{searchTerm:{type:String,attribute:!1},iconSize:{type:Number,attribute:!1}}}constructor(){super(),this.searchTerm=``,this.iconSize=48}static get styles(){return i`
${k()}
.content h2 {
color: var(--dbp-content);
font-weight: 600;
line-height: 1.125;
margin-top: 2em;
font-size: 1.5em;
margin-bottom: 0.75em;
}
.control {
margin-bottom: 1.5rem;
}
.control:not(:last-child) {
margin-bottom: 0.5rem;
}
a:hover {
color: #ffbb00 !important;
background-color: blue;
}
.search-and-size {
display: flex;
align-items: flex-start;
gap: 2rem;
margin: 1.5rem 0;
}
.search-box {
flex: 1;
}
.search-box input {
width: 100%;
max-width: 400px;
padding: 0.75rem;
font-size: 1rem;
border: 1px solid var(--dbp-muted);
box-sizing: border-box;
}
.search-box input:focus {
outline: none;
border-color: var(--dbp-accent);
}
.size-control {
min-width: 250px;
}
.size-control label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--dbp-content);
}
.slider-container {
display: flex;
align-items: center;
gap: 1rem;
}
.slider-container input[type='range'] {
flex: 1;
height: 6px;
background: var(--dbp-muted);
outline: none;
-webkit-appearance: none;
}
.slider-container input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--dbp-accent);
cursor: pointer;
}
.slider-container input[type='range']::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--dbp-accent);
cursor: pointer;
border: none;
}
.size-value {
min-width: 60px;
text-align: right;
font-weight: 500;
color: var(--dbp-content);
font-family: monospace;
}
.icon-count {
color: var(--dbp-muted);
font-size: 0.875rem;
margin-top: 0.5rem;
}
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.icon-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
border: 1px solid var(--dbp-muted);
cursor: pointer;
}
.icon-item dbp-icon {
margin-bottom: 0.75rem;
color: var(--dbp-content);
}
.icon-name {
font-size: 0.875rem;
color: var(--dbp-content);
text-align: center;
word-break: break-word;
font-family: monospace;
}
.no-results {
text-align: center;
padding: 3rem;
color: var(--dbp-muted);
font-size: 1.125rem;
}
`}getFilteredIcons(){if(!this.searchTerm)return M;let e=this.searchTerm.toLowerCase();return M.filter(t=>t.toLowerCase().includes(e))}handleSearchInput(e){this.searchTerm=e.target.value}handleSizeChange(e){this.iconSize=parseInt(e.target.value)}render(){let e=this.getFilteredIcons();return n`
<style>
a:after {
${O(`envelope`)};
}
</style>
<div class="content">
<h2>Icons</h2>
<div class="control">
<p style="text-decoration: underline">
Foo
<dbp-icon name="cloudnetwork" aria-label="cloudnetwork icon"></dbp-icon>
bar
</p>
<p style="font-size: 2em;">
Foo
<dbp-icon name="cloudnetwork" aria-label="cloudnetwork icon"></dbp-icon>
bar
</p>
<p style="font-size: 2em; color:var(--dbp-warning);">
Foo
<dbp-icon name="cloudnetwork" aria-label="cloudnetwork icon"></dbp-icon>
bar
</p>
<span style="background-color: #000">
<a href="#" style=" color: #fff">foobar</a>
</span>
<p style="font-size: 2em; color:var(--dbp-warning);">
Foo
<dbp-icon name="information" aria-label="Information icon"></dbp-icon>
bar
</p>
<br />
${Array(100).fill(0).map(e=>n`
<dbp-icon
aria-label="A happy face icon"
style="color:var(--dbp-success); width: 50px; height: 50px; border: #000 solid 1px"
name="happy"></dbp-icon>
`)}
</div>
<h2>All Available Icons</h2>
<div class="search-and-size">
<div class="search-box">
<input
type="text"
placeholder="Search icons..."
.value="${this.searchTerm}"
@input="${this.handleSearchInput}"
aria-label="Search icons" />
<div class="icon-count">
Showing ${e.length} of ${M.length} icons
</div>
</div>
<div class="size-control">
<label for="icon-size-slider">Icon Size: ${this.iconSize}px</label>
<div class="slider-container">
<input
id="icon-size-slider"
type="range"
min="16"
max="128"
step="4"
.value="${this.iconSize}"
@input="${this.handleSizeChange}"
aria-label="Icon size" />
<span class="size-value">${this.iconSize}px</span>
</div>
</div>
</div>
${e.length>0?n`
<div class="icon-grid">
${e.map(e=>n`
<div
class="icon-item"
@click="${()=>navigator.clipboard.writeText(e)}">
<lazy-load>
<div
slot="placeholder"
style="width: ${this.iconSize}px; height: ${this.iconSize}px;">
awdad
</div>
<dbp-icon
name="${e}"
aria-label="${e} icon"
style="width: ${this.iconSize}px; height: ${this.iconSize}px;"></dbp-icon>
</lazy-load>
<span class="icon-name">${e}</span>
</div>
`)}
</div>
`:n`
<div class="no-results">No icons found matching "${this.searchTerm}"</div>
`}
</div>
`}},F=class extends s(t(D),g){static get scopedElements(){return{"dbp-mini-spinner":m,"dbp-spinner":d,"dbp-inline-notification":T,"dbp-translated":_,"dbp-translation":C}}static get properties(){return{...super.properties}}static get styles(){return i`
${k()}
.control:not(:last-child) {
margin-bottom: 0.5rem;
}
.content h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
color: var(--dbp-content);
font-weight: 600;
line-height: 1.125;
margin-top: 2em;
}
`}render(){return n`
<div class="content">
<h2>Mini Spinner</h2>
<div class="control">
<dbp-mini-spinner text="Loading..."></dbp-mini-spinner>
<dbp-mini-spinner></dbp-mini-spinner>
<dbp-mini-spinner style="font-size: 2em"></dbp-mini-spinner>
<dbp-mini-spinner style="font-size: 3em"></dbp-mini-spinner>
</div>
</div>
<div class="content">
<h2>Spinner</h2>
<div class="control">
<dbp-spinner></dbp-spinner>
</div>
</div>
<div class="content">
<h2>Theming CSS Override API</h2>
<pre><code style="text-wrap: wrap;">
<style>
html {
/* This will override --dbp-primary-surface */
--dbp-override-primary-surface: green;
/* Same for all other variables, prefix with "override" */
}
</style></code></pre>
</div>
<div class="content">
<h2>Inline Notification</h2>
<div class="control">
<dbp-inline-notification
summary="Default - no type"
body="Item <b>foo</b> was deleted!"></dbp-inline-notification>
<br />
<dbp-inline-notification
summary="Primary - Item deleted"
body="Item <b>foo</b> was deleted!"
type="primary"></dbp-inline-notification>
<br />
<dbp-inline-notification
summary="Info - Item deleted"
body="Item <b>foo</b> was deleted!"
type="info"></dbp-inline-notification>
<br />
<dbp-inline-notification
summary="Success - Item deleted"
body="Item <b>foo</b> was deleted!"
type="success"></dbp-inline-notification>
<br />
<dbp-inline-notification
summary="Warning - item deleted"
body="Item <b>foo</b> was deleted!"
type="warning"></dbp-inline-notification>
<br />
<dbp-inline-notification
summary="Danger - item will be deleted"
body="Item <b>foo</b> was deleted!"
type="danger"></dbp-inline-notification>
</div>
</div>
<div class="content">
<h2>Translated text</h2>
<div class="control" id="dbp-translated-demo">
<dbp-translated subscribe="lang">
<div slot="de">
Dieser Text ist Deutsch und wird Englisch werden wenn man die Sprache
auf Englisch stellt.
</div>
<div slot="en">
This text is English and will be German if the language is changed to
German.
</div>
</dbp-translated>
</div>
<div class="control" id="dbp-translation-demo">
<dbp-translation
key="toolkit-showcase"
subscribe="lang, lang-dir"></dbp-translation>
<dbp-translation
key="toolkit-showcase-link"
var='{"link1": "https://www.i18next.com/translation-function/interpolation"}'
subscribe="lang, lang-dir"
unsafe></dbp-translation>
<dbp-translation key="abc" subscribe="lang, lang-dir"></dbp-translation>
</div>
</div>
`}},I=class extends s(t(D),g){constructor(){super()}static get scopedElements(){return{"dbp-icon":l,"dbp-button":f,"dbp-select":h}}static get properties(){return{...super.properties}}static get styles(){return i`
${k()}
`}firstUpdated(){super.firstUpdated(),this._(`#action-dropdown-demo-1`).setOptions([{name:`edit`,label:`Edit`},{name:`delete`,label:`Delete`},{name:`share`,label:`Share`}]),this._(`#action-dropdown-demo-2`).setOptions([{name:`save`,label:`Save`,iconName:`save`},{name:`delete`,label:`Delete`,iconName:`trash`},{name:`upload`,label:`Upload`,iconName:`upload`},{name:`disabled`,label:`Disabled`,iconName:`pencil`,disabled:!0}])}render(){return n`
<div class="content">
<h2>Select component</h2>
<div class="control">
<h3>Basic Select</h3>
<dbp-select id="action-dropdown-demo-1" label="Actions"></dbp-select>
</div>
<div class="control">
<h3>Select with icons</h3>
<dbp-select
id="action-dropdown-demo-2"
label="Actions"
button-type="is-primary"></dbp-select>
</div>
</div>
`}},L={"logging-in":`Anmeldung läuft`,login:`Anmelden`,"login-failed":`Kommunikation mit dem Anmeldeserver fehlgeschlagen`,logout:`Abmelden`},R={"logging-in":`Logging in`,login:`Login`,"login-failed":`Communication with the login server failed`,logout:`Logout`};function z(){return e({en:R,de:L},`de`,`en`)}const B=function(e,t){let n=new Promise((t,n)=>{let r=setTimeout(()=>{clearTimeout(r),n(`Timed out in `+e+`ms.`)},e)});return Promise.race([t,n])},V=function(e){try{return new URL(e).href}catch{return new URL(e,window.location.href).href}};var H=class extends EventTarget{constructor(e,t,n,r,i,a){super(),this._baseURL=e,this._realm=t,this._clientId=n,this._keycloak=null,this._initPromise=null,this._silentCheckSsoUri=r,this._checkLoginIframe=i,this._idpHint=a,this._checkId=null,this.MIN_VALIDITY=20,this.CHECK_INTERVAL=10,this.DEBUG=!1,this._onVisibilityChanged=this._onVisibilityChanged.bind(this),document.addEventListener(`visibilitychange`,this._onVisibilityChanged)}close(){document.removeEventListener(`visibilitychange`,this._onVisibilityChanged)}_onVisibilityChanged(){document.visibilityState===`visible`&&this._checkTokeHasExpired()}_onChanged(){let e=new CustomEvent(`changed`,{detail:this._keycloak,bubbles:!0,composed:!0});this.dispatchEvent(e)}_onReady(e){e&&this._onChanged()}async _onTokenExpired(){console.log(`Token has expired`);let e;try{e=await this._keycloak.updateToken(-1)}catch(e){console.log(`Failed to refresh the token`,e);return}console.assert(e,`token should have been refreshed`)}async _checkTokeHasExpired(){let e;if(this._keycloak===null||!this._keycloak.authenticated)return;let t=this.MIN_VALIDITY+this.CHECK_INTERVAL;this.DEBUG&&console.log(`Updating token if not valid for at least ${t}s`);try{e=await this._keycloak.updateToken(t)}catch(e){console.log(`Failed to refresh the token`,e)}this.DEBUG&&e&&console.log(`token has been refreshed`)}async _onAuthSuccess(){this._checkId!==null&&(clearInterval(this._checkId),this._checkId=null),this._checkId=setInterval(this._checkTokeHasExpired.bind(this),this.CHECK_INTERVAL*1e3),this._onChanged()}async _onAuthLogout(){this._checkId!==null&&(clearInterval(this._checkId),this._checkId=null),this._onChanged()}async _init(){let e=(await import(`./shared/keycloak.CEtdvogm.js`)).default;this._keycloak=new e({url:this._baseURL,realm:this._realm,clientId:this._clientId}),this._keycloak.onTokenExpired=this._onTokenExpired.bind(this),this._keycloak.onAuthRefreshSuccess=this._onChanged.bind(this),this._keycloak.onAuthRefreshError=this._onChanged.bind(this),this._keycloak.onAuthLogout=this._onAuthLogout.bind(this),this._keycloak.onAuthSuccess=this._onAuthSuccess.bind(this),this._keycloak.onAuthError=this._onChanged.bind(this),this._keycloak.onReady=this._onReady.bind(this);let t={};t.pkceMethod=`S256`,this.DEBUG&&(t.enableLogging=!0),t.checkLoginIframe=this._checkLoginIframe,this._silentCheckSsoUri?(t.onLoad=`check-sso`,t.silentCheckSsoRedirectUri=V(this._silentCheckSsoUri),await B(5e3,this._keycloak.init(t)).catch(()=>{console.log(`Login timed out`),this._onChanged()})):await this._keycloak.init(t)}async _ensureInit(){return this._initPromise===null&&(this._initPromise=this._init()),this._initPromise}isLoggingIn(){let e=window.location.href;return e.search(`[&#]state=`)>=0&&e.search(`[&#]session_state=`)>=0}async login(e){await this._ensureInit(),e||={};let t=e.lang||`en`,n=e.scope||``;this._keycloak.authenticated||await this._keycloak.login({locale:t,scope:n,idpHint:this._idpHint})}async tryLogin(){await this._ensureInit()}async localLogout(){this._keycloak.clearToken()}async logout(){await this._ensureInit(),this._keycloak.logout()}};const U=Object.freeze({UNKNOWN:`unknown`,LOGGING_IN:`logging-in`,LOGGED_IN:`logged-in`,LOGGING_OUT:`logging-out`,LOGGED_OUT:`logged-out`});var W=class extends s(o,z){constructor(){super(),this.forceLogin=!1,this.token=``,this.subject=``,this.name=``,this.tryLogin=!1,this.entryPointUrl=``,this._user=null,this._userId=``,this._authenticated=!1,this._loginStatus=U.UNKNOWN,this.requestedLoginStatus=U.UNKNOWN,this.keycloakUrl=null,this.realm=null,this.clientId=null,this.silentCheckSsoRedirectUri=null,this.noCheckLoginIframe=!1,this.scope=null,this.idpHint=``,this._onKCChanged=this._onKCChanged.bind(this),window.playwright&&this.setAttribute(`data-testid`,`dbp-auth-keycloak`)}update(e){e.forEach((e,t)=>{switch(t){case`requestedLoginStatus`:{console.log(`requested-login-status changed`,this.requestedLoginStatus);let e=this.requestedLoginStatus;switch(this.requestedLoginStatus=U.UNKNOWN,e){case U.LOGGED_IN:this._kcwrapper.login({lang:this.lang,scope:this.scope||``});break;case U.LOGGED_OUT:this._loginStatus===U.LOGGED_IN&&this._setLoginStatus(U.LOGGING_OUT),this._kcwrapper.logout(),this._loginStatus===U.LOGGING_OUT&&this._setLoginStatus(U.LOGGED_IN);break}break}}}),super.update(e)}async _fetchUser(e,t){let n=b(this.entryPointUrl,`/frontend/users/${encodeURIComponent(e)}`),r=await fetch(n,{headers:{Authorization:`Bearer `+t}});if(!r.ok)throw r;return{roles:(await r.json()).roles??[]}}async _onKCChanged(e){let t=e.detail;if(this._authenticated=t.authenticated,t.authenticated){if(t.subject!==this.subject){this._loginStatus===U.LOGGED_IN&&(this._setLoginStatus(U.LOGGING_OUT),this._setLoggedOut());let e=t.idTokenParsed.preferred_username;this._userId=e;let n;try{n=await this._fetchUser(e,t.token)}catch(e){console.error(e),n={roles:[]}}e===this._userId&&(this._user=n)}let e=this.token!==t.token;this.token=t.token,this.name=t.idTokenParsed.name,this.subject=t.subject,this._user!==null&&this._setLoginStatus(U.LOGGED_IN,e)}else this._logi