wj-elements 0.1.91 → 0.1.92
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/wje-button.js +1 -1
- package/dist/wje-chip.js +1 -0
- package/package.json +1 -1
package/dist/wje-button.js
CHANGED
|
@@ -9,7 +9,7 @@ import Icon from "./wje-icon.js";
|
|
|
9
9
|
const bool = (v) => {
|
|
10
10
|
return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
|
|
11
11
|
};
|
|
12
|
-
const styles = '/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n background-color: var(--wje-color-primary-9);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n background-color: var(--wje-color-primary-1);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n background-color: var(--wje-color-complete-9);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n background-color: var(--wje-color-complete-1);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n background-color: var(--wje-color-success-9);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n background-color: var(--wje-color-success-1);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n background-color: var(--wje-color-warning-9);\n border-color: var(--wje-color-warning-9);\n color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n background-color: var(--wje-color-danger-9);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n background-color: var(--wje-color-danger-1);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-neutral {\n background-color: var(--wje-color-contrast-9);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-neutral {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n background-color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-5);\n color: var(--wje-color-contrast-11);\n}\n\n:host {\n --wje-padding-top: .4rem;\n --wje-padding-start: .5rem;\n --wje-padding-end: .5rem;\n --wje-padding-bottom: .4rem;\n\n display: inline-flex;\n position: relative;\n width: auto;\n cursor: pointer;\n margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n display: block;\n}\n\n.native-button {\n font-family: var(--wje-font-family);\n font-size: var(--wje-font-size);\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n min-height: inherit;\n /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n border-width: var(--wje-button-border-width);\n border-style: var(--wje-button-border-style);\n border-color: var(--wje-button-border-color);\n background-color: transparent;\n /*color: var(--wje-button-color);*/\n line-height: 1;\n contain: layout style;\n cursor: pointer;\n z-index: 0;\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n border-radius: var(--wje-button-border-radius);\n padding-top: var(--wje-padding-top);\n padding-bottom: var(--wje-padding-bottom);\n padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n white-space: nowrap;\n}\n\n.native-button:hover {\n outline-style: solid;\n outline-width: var(--wje-button-outline-width);\n transition: outline-width .1s linear;\n}\n\n@media (any-hover: hover) {\n .wje-button-solid.wje-color-primary:hover {\n background-color: var(--wje-color-primary-9);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-primary-2);\n }\n\n .wje-button-outline.wje-color-primary:hover {\n background-color: var(--wje-color-primary-1);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-primary-9);\n outline-color: var(--wje-color-primary-2);\n }\n\n .wje-button-solid.wje-color-complete:hover {\n background-color: var(--wje-color-complete-9);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-complete-2);\n }\n\n .wje-button-outline.wje-color-complete:hover {\n background-color: var(--wje-color-complete-1);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-complete-9);\n outline-color: var(--wje-color-complete-2);\n }\n\n .wje-button-solid.wje-color-success:hover {\n background-color: var(--wje-color-success-9);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-success-2);\n }\n\n .wje-button-outline.wje-color-success:hover {\n background-color: var(--wje-color-success-1);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-success-9);\n outline-color: var(--wje-color-success-2);\n }\n\n .wje-button-solid.wje-color-warning:hover {\n background-color: var(--wje-color-warning-9);\n border-color: var(--wje-color-warning-9);\n color: var(--wje-color-black);\n outline-color: var(--wje-color-warning-2);\n }\n\n .wje-button-outline.wje-color-warning:hover {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n outline-color: var(--wje-color-warning-2);\n }\n\n .wje-button-solid.wje-color-danger:hover {\n background-color: var(--wje-color-danger-9);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-danger-2);\n }\n\n .wje-button-outline.wje-color-danger:hover {\n background-color: var(--wje-color-danger-1);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-danger-9);\n outline-color: var(--wje-color-danger-2);\n }\n\n .wje-button-solid.wje-color-neutral:hover {\n background-color: var(--wje-color-contrast-9);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-outline.wje-color-neutral:hover {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-9);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-solid.wje-color-default:hover {\n background-color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-outline.wje-color-default:hover {\n background-color: var(--wje-color-contrast-2);\n border-color: var(--wje-color-contrast-5);\n color: var(--wje-color-contrast-11);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-link:hover {\n background-color: var(--wje-color-contrast-3);\n border-color: transparent;\n color: var(--wje-color-contrast-11);\n outline-color: transparent;\n outline-width: 0;\n }\n}\n\n.button-inner {\n display: flex;\n position: relative;\n flex-flow: row nowrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n z-index: 1;\n line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n border-width: var(--wje-button-border-width);\n border-radius: var(--wje-button-border-radius);\n border-color: transparent;\n background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n cursor: default;\n opacity: .5;\n pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n border-radius: var(--wje-border-radius-circle);\n aspect-ratio: 1/1;\n width: 1.813rem;\n display: flex;\n align-items: center;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n\n}\n\n:host([size=small]) .native-button {\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n}\n\n:host([size=large]) .native-button {\n --wje-padding-top: .6rem;\n --wje-padding-start: .7rem;\n --wje-padding-end: .7rem;\n --wje-padding-bottom: .6rem;\n}\n\n:host([size=small][circle]) .native-button {\n width: 1.5rem;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n}\n\n:host([size=large][circle]) .native-button {\n width: 2.188rem;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot="start"]) {\n margin: 0 .3rem 0 -.3rem;\n}\n\n::slotted(wje-icon[slot="end"]) {\n margin: 0 -.2rem 0 .3rem;\n}\n\n:host(:not([only-caret])) slot[name="caret"] {\n padding: 0 0 0 .3rem;\n}\n\n:host([only-caret]) slot[name="caret"] {\n padding: 0;\n display: block;\n}\n\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n}\n\n:host(.wje-button-group-inner) .native-button {\n border-radius: 0;\n}\n\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\n margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\n}\n\n::slotted([slot="toggle"]) {\n display: none;\n}\n\n::slotted([slot="toggle"].show) {\n display: block;\n}\n';
|
|
12
|
+
const styles = '/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n background-color: var(--wje-color-primary-9);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n background-color: var(--wje-color-primary-1);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n background-color: var(--wje-color-complete-9);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n background-color: var(--wje-color-complete-1);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n background-color: var(--wje-color-success-9);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n background-color: var(--wje-color-success-1);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n background-color: var(--wje-color-warning-9);\n border-color: var(--wje-color-warning-9);\n color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n background-color: var(--wje-color-danger-9);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n background-color: var(--wje-color-danger-1);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n background-color: var(--wje-color-contrast-9);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n background-color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-5);\n color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-contrast-11);\n}\n\n:host {\n --wje-padding-top: .4rem;\n --wje-padding-start: .5rem;\n --wje-padding-end: .5rem;\n --wje-padding-bottom: .4rem;\n\n display: inline-flex;\n position: relative;\n width: auto;\n cursor: pointer;\n margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n display: block;\n}\n\n.native-button {\n font-family: var(--wje-font-family);\n font-size: var(--wje-font-size);\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n min-height: inherit;\n /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n border-width: var(--wje-button-border-width);\n border-style: var(--wje-button-border-style);\n border-color: var(--wje-button-border-color);\n background-color: transparent;\n /*color: var(--wje-button-color);*/\n line-height: 1;\n contain: layout style;\n cursor: pointer;\n z-index: 0;\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n border-radius: var(--wje-button-border-radius);\n padding-top: var(--wje-padding-top);\n padding-bottom: var(--wje-padding-bottom);\n padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n white-space: nowrap;\n}\n\n.native-button:hover {\n outline-style: solid;\n outline-width: var(--wje-button-outline-width);\n transition: outline-width .1s linear;\n}\n\n@media (any-hover: hover) {\n .wje-button-solid.wje-color-primary:hover {\n background-color: var(--wje-color-primary-9);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-primary-2);\n }\n\n .wje-button-outline.wje-color-primary:hover {\n background-color: var(--wje-color-primary-1);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-primary-9);\n outline-color: var(--wje-color-primary-2);\n }\n\n .wje-button-link.wje-color-primary:hover {\n background-color: var(--wje-color-primary-1);\n border-color: transparent;\n color: var(--wje-color-primary-9);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-complete:hover {\n background-color: var(--wje-color-complete-9);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-complete-2);\n }\n\n .wje-button-outline.wje-color-complete:hover {\n background-color: var(--wje-color-complete-1);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-complete-9);\n outline-color: var(--wje-color-complete-2);\n }\n\n .wje-button-link.wje-color-complete:hover {\n background-color: var(--wje-color-complete-1);\n border-color: transparent;\n color: var(--wje-color-complete-9);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-success:hover {\n background-color: var(--wje-color-success-9);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-success-2);\n }\n\n .wje-button-outline.wje-color-success:hover {\n background-color: var(--wje-color-success-1);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-success-9);\n outline-color: var(--wje-color-success-2);\n }\n\n .wje-button-link.wje-color-success:hover {\n background-color: var(--wje-color-success-1);\n border-color: transparent;\n color: var(--wje-color-success-9);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-warning:hover {\n background-color: var(--wje-color-warning-9);\n border-color: var(--wje-color-warning-9);\n color: var(--wje-color-black);\n outline-color: var(--wje-color-warning-2);\n }\n\n .wje-button-outline.wje-color-warning:hover {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n outline-color: var(--wje-color-warning-2);\n }\n\n .wje-button-link.wje-color-warning:hover {\n background-color: var(--wje-color-warning-1);\n border-color: transparent;\n color: var(--wje-color-warning-11);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-danger:hover {\n background-color: var(--wje-color-danger-9);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-danger-2);\n }\n\n .wje-button-outline.wje-color-danger:hover {\n background-color: var(--wje-color-danger-1);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-danger-9);\n outline-color: var(--wje-color-danger-2);\n }\n\n .wje-button-link.wje-color-danger:hover {\n background-color: var(--wje-color-danger-1);\n border-color: transparent;\n color: var(--wje-color-danger-9);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-info:hover {\n background-color: var(--wje-color-contrast-9);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-outline.wje-color-info:hover {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-9);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-link.wje-color-info:hover {\n background-color: var(--wje-color-contrast-3);\n border-color: transparent;\n color: var(--wje-color-contrast-11);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-default:hover {\n background-color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-outline.wje-color-default:hover {\n background-color: var(--wje-color-contrast-2);\n border-color: var(--wje-color-contrast-5);\n color: var(--wje-color-contrast-11);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-link.wje-color-default:hover {\n background-color: var(--wje-color-contrast-3);\n border-color: transparent;\n color: var(--wje-color-contrast-11);\n outline-color: transparent;\n outline-width: 0;\n }\n}\n\n.button-inner {\n display: flex;\n position: relative;\n flex-flow: row nowrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n z-index: 1;\n line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n border-width: var(--wje-button-border-width);\n border-radius: var(--wje-button-border-radius);\n border-color: transparent;\n background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n cursor: default;\n opacity: .5;\n pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n border-radius: var(--wje-border-radius-circle);\n aspect-ratio: 1/1;\n width: 1.813rem;\n display: flex;\n align-items: center;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n\n}\n\n:host([size=small]) .native-button {\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n}\n\n:host([size=large]) .native-button {\n --wje-padding-top: .6rem;\n --wje-padding-start: .7rem;\n --wje-padding-end: .7rem;\n --wje-padding-bottom: .6rem;\n}\n\n:host([size=small][circle]) .native-button {\n width: 1.5rem;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n}\n\n:host([size=large][circle]) .native-button {\n width: 2.188rem;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot="start"]) {\n margin: 0 .3rem 0 -.3rem;\n}\n\n::slotted(wje-icon[slot="end"]) {\n margin: 0 -.2rem 0 .3rem;\n}\n\n:host(:not([only-caret])) slot[name="caret"] {\n padding: 0 0 0 .3rem;\n}\n\n:host([only-caret]) slot[name="caret"] {\n padding: 0;\n display: block;\n}\n\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n}\n\n:host(.wje-button-group-inner) .native-button {\n border-radius: 0;\n}\n\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\n margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\n}\n\n::slotted([slot="toggle"]) {\n display: none;\n}\n\n::slotted([slot="toggle"].show) {\n display: block;\n}\n';
|
|
13
13
|
class Button extends WJElement {
|
|
14
14
|
/**
|
|
15
15
|
* Button constructor
|
package/dist/wje-chip.js
CHANGED
|
@@ -25,6 +25,7 @@ class Chip extends WJElement {
|
|
|
25
25
|
let remove = document.createElement("wje-button");
|
|
26
26
|
remove.setAttribute("part", "remove");
|
|
27
27
|
remove.setAttribute("fill", "link");
|
|
28
|
+
remove.setAttribute("color", this.color || "default");
|
|
28
29
|
remove.innerHTML = `<wje-icon name="x"></wje-icon>`;
|
|
29
30
|
let active = document.createElement("wje-icon");
|
|
30
31
|
active.setAttribute("name", "check");
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wj-elements",
|
|
3
3
|
"description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.92",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|