@proximus/lavender 2.0.0-alpha.32 → 2.0.0-alpha.36
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/dist/lavender.cjs.js +1 -1
- package/dist/lavender.es.js +29 -15
- package/dist/lavender.umd.js +1 -1
- package/package.json +1 -1
package/dist/lavender.es.js
CHANGED
|
@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
6
6
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
7
7
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
8
8
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
9
|
-
var _src, _internals, _template, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn;
|
|
9
|
+
var _src, _internals, _template, _Select_instances, updateOptions_fn, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn;
|
|
10
10
|
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
|
|
11
11
|
function getSupportedPropertyNames(htmlElementName) {
|
|
12
12
|
const $element = document.createElement(htmlElementName);
|
|
@@ -11830,29 +11830,40 @@ if (!customElements.get("px-textarea")) {
|
|
|
11830
11830
|
customElements.define("px-textarea", TextArea);
|
|
11831
11831
|
}
|
|
11832
11832
|
const _Select = class _Select extends AbstractInputElement {
|
|
11833
|
-
template() {
|
|
11834
|
-
return '<select><slot name="options"></slot></select>';
|
|
11835
|
-
}
|
|
11836
11833
|
constructor() {
|
|
11837
11834
|
super();
|
|
11835
|
+
__privateAdd(this, _Select_instances);
|
|
11836
|
+
}
|
|
11837
|
+
template() {
|
|
11838
|
+
return '<select><slot name="options"></slot></select>';
|
|
11838
11839
|
}
|
|
11839
11840
|
connectedCallback() {
|
|
11840
11841
|
super.connectedCallback();
|
|
11841
|
-
|
|
11842
|
-
if ($options.length > 0) {
|
|
11843
|
-
$options.forEach(($option) => {
|
|
11844
|
-
this.$el.appendChild($option);
|
|
11845
|
-
});
|
|
11846
|
-
}
|
|
11842
|
+
__privateMethod(this, _Select_instances, updateOptions_fn).call(this);
|
|
11847
11843
|
this.observer = new MutationObserver(() => {
|
|
11848
|
-
this
|
|
11844
|
+
__privateMethod(this, _Select_instances, updateOptions_fn).call(this);
|
|
11845
|
+
});
|
|
11846
|
+
this.observer.observe(this, {
|
|
11847
|
+
childList: true,
|
|
11848
|
+
attributes: true,
|
|
11849
|
+
subtree: true
|
|
11849
11850
|
});
|
|
11850
|
-
this.observer.observe(this, { childList: true });
|
|
11851
11851
|
}
|
|
11852
11852
|
disconnectedCallback() {
|
|
11853
11853
|
this.observer.disconnect();
|
|
11854
11854
|
}
|
|
11855
11855
|
};
|
|
11856
|
+
_Select_instances = new WeakSet();
|
|
11857
|
+
updateOptions_fn = function() {
|
|
11858
|
+
const $options = this.querySelectorAll("option");
|
|
11859
|
+
this.$el.querySelectorAll("option").forEach(($option) => $option.remove());
|
|
11860
|
+
if ($options.length > 0) {
|
|
11861
|
+
$options.forEach(($option) => {
|
|
11862
|
+
const $clonedOption = $option.cloneNode(true);
|
|
11863
|
+
this.$el.appendChild($clonedOption);
|
|
11864
|
+
});
|
|
11865
|
+
}
|
|
11866
|
+
};
|
|
11856
11867
|
_Select.nativeName = "select";
|
|
11857
11868
|
let Select = _Select;
|
|
11858
11869
|
if (!customElements.get("px-select")) {
|
|
@@ -14239,7 +14250,7 @@ let ContentHeader = _ContentHeader;
|
|
|
14239
14250
|
if (!customElements.get("px-content-header")) {
|
|
14240
14251
|
customElements.define("px-content-header", ContentHeader);
|
|
14241
14252
|
}
|
|
14242
|
-
const breadcrumbCss = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item
|
|
14253
|
+
const breadcrumbCss = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){display:flex;align-items:center;margin-right:var(--px-spacing-xs-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{display:inline-block;content:"";width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile)}@media only screen and (min-width: 48em){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}`;
|
|
14243
14254
|
const breadcrumbStyles = new CSSStyleSheet();
|
|
14244
14255
|
breadcrumbStyles.replaceSync(breadcrumbCss);
|
|
14245
14256
|
class Breadcrumb extends WithExtraAttributes {
|
|
@@ -14308,10 +14319,13 @@ class Breadcrumb extends WithExtraAttributes {
|
|
|
14308
14319
|
if (!customElements.get("px-breadcrumb")) {
|
|
14309
14320
|
customElements.define("px-breadcrumb", Breadcrumb);
|
|
14310
14321
|
}
|
|
14322
|
+
const breadcrumbItemCss = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-default)}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-default)}:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-tablet)}}@media only screen and (min-width: 64.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-laptop)}}@media only screen and (min-width: 90.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-desktop)}}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-inverted)}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-inverted)}";
|
|
14323
|
+
const breadcrumbItemStyles = new CSSStyleSheet();
|
|
14324
|
+
breadcrumbItemStyles.replaceSync(breadcrumbItemCss);
|
|
14311
14325
|
const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
|
|
14312
14326
|
constructor() {
|
|
14313
|
-
super();
|
|
14314
|
-
this.template = () => `<div role="listitem"><slot></slot></div>`;
|
|
14327
|
+
super(breadcrumbItemStyles);
|
|
14328
|
+
this.template = () => `<div class="breadcrumb-item" role="listitem"><slot></slot></div>`;
|
|
14315
14329
|
if (this.shadowRoot) {
|
|
14316
14330
|
this.shadowRoot.innerHTML = this.template();
|
|
14317
14331
|
}
|