wj-elements 0.7.1 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +7689 -7689
- package/dist/web-types.json +927 -927
- package/dist/wje-chip.js +1 -1
- package/package.json +1 -1
package/dist/wje-chip.js
CHANGED
|
@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
4
4
|
import WJElement from "./wje-element.js";
|
|
5
5
|
import { WjElementUtils } from "./element-utils.js";
|
|
6
6
|
import { event } from "./event.js";
|
|
7
|
-
const styles = "/*\n[ WJ Chip ]\n*/\n\n:host {\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n --wje-button-border-radius: var(--wje-chip-round-border-radius);\n}\n\n.native-chip {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-size: var(--wje-font-size);\n line-height: 1;\n letter-spacing: -0.006em;\n padding-block: var(--wje-chip-padding-block);\n padding-inline: var(--wje-chip-padding-inline);\n margin-block: var(--wje-chip-margin-block);\n margin-inline: var(--wje-chip-margin-inline);\n text-align: center;\n cursor: pointer;\n white-space: nowrap;\n text-shadow: none;\n box-shadow: none;\n border: 0 none;\n width: 100%;\n height: 28px;\n max-width: 100%;\n min-width: 0;\n position: relative;\n transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: var(--wje-border-radius-pill);\n overflow: hidden;\n vertical-align: middle;\n box-sizing: border-box;\n background-color: var(--wje-chip-background);\n color: var(--wje-chip-color);\n &:hover {\n background-color: var(--wje-chip-background-hover);\n color: var(--wje-chip-color-hover);\n }\n}\n\n.content {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.content slot {\n display: block;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.focus) {\n box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n border: 1px solid var(--wje-color-primary-11);\n background-color: var(--wje-color-contrast-3);\n color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n outline: none !important;\n}\n\n:host([size='small']) .native-chip {\n font-size: var(--wje-font-size-small);\n height: 24px;\n padding: var(--wje-spacing-3x-small) var(--wje-spacing-x-small);\n wje-button {\n --wje-button-margin-inline: var(--wje-spacing-3x-small) 0;\n }\n}\n\n:host([size='large']) .native-chip {\n font-size: var(--wje-font-size-medium);\n height: 34px;\n padding: var(--wje-spacing-x-small) var(--wje-spacing-small);\n\n}\n\n:host([round]) .native-chip {\n border-radius: var(--wje-chip-round-border-radius);\n}\n\n.check {\n display: none;\n}\n\n:host([active]) {\n .check {\n display: block;\n margin-inline: 4px 0;\n }\n}\n\n:host([disabled]) {\n opacity: 0.5;\n border: 0;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n width: 22px;\n height: 22px;\n}\n\n::slotted(wje-avatar:not([slot]):first-child) {\n margin-inline: -8px 8px;\n margin-top: -4px;\n margin-bottom: -4px;\n}\n\n::slotted(wje-icon:not([slot]):first-child) {\n margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:not([slot]):last-child) {\n margin: -4px -4px -4px 8px;\n}\n\n::slotted(wje-label) {\n display: block;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nslot[name='start'],\nslot[name='end'] {\n display: none;\n flex: 0 0 auto;\n align-items: center;\n min-width: 0;\n}\n\nslot[name='start'].has-content,\nslot[name='end'].has-content {\n display: inline-flex;\n}\n\nslot[name='start'].has-content {\n margin-inline-end: 8px;\n}\n\nslot[name='end'].has-content {\n margin-inline-start: 8px;\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n}\n\n::slotted(wje-avatar[slot='start']) {\n margin-inline-start: -8px;\n margin-top: -4px;\n margin-bottom: -4px;\n}\n\n::slotted(wje-icon[slot='start']) {\n margin: -4px 0 -4px -4px;\n}\n\n::slotted(wje-icon[slot='end']) {\n margin: -4px -4px -4px 0;\n}\n\nwje-button {\n flex: 0 0 auto;\n /*--wje-button-border-radius: 50%;*/\n --wje-button-margin-inline: 0.25rem 0;\n --wje-padding-top: 0.15rem;\n --wje-padding-start: 0.15rem;\n --wje-padding-end: 0.15rem;\n --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n background-color: var(--wje-color-primary-1);\n color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n background-color: var(--wje-color-complete-1);\n color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n background-color: var(--wje-color-success-1);\n color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n background-color: var(--wje-color-warning-2);\n color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n background-color: var(--wje-color-danger-1);\n color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n background-color: var(--wje-color-info-1);\n color: var(--wje-color-info-9);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n .native-chip.wje-color-primary:hover {\n background-color: var(--wje-color-primary-4);\n color: var(--wje-color-primary-10);\n }\n\n .native-chip.wje-color-complete:hover {\n background-color: var(--wje-color-complete-4);\n color: var(--wje-color-complete-10);\n }\n\n .native-chip.wje-color-success:hover {\n background-color: var(--wje-color-success-4);\n color: var(--wje-color-success-10);\n }\n\n .native-chip.wje-color-warning:hover {\n background-color: var(--wje-color-warning-4);\n color: var(--wje-color-warning-11);\n }\n\n .native-chip.wje-color-danger:hover {\n background-color: var(--wje-color-danger-4);\n color: var(--wje-color-danger-10);\n }\n\n .native-chip.wje-color-info:hover {\n background-color: var(--wje-color-info-4);\n color: var(--wje-color-info-10);\n }\n}\n";
|
|
7
|
+
const styles = "/*\n[ WJ Chip ]\n*/\n\n:host {\n display: inline-flex;\n width: fit-content;\n min-width: 0;\n max-width: 100%;\n --wje-button-border-radius: var(--wje-chip-round-border-radius);\n}\n\n.native-chip {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-size: var(--wje-font-size);\n line-height: 1;\n letter-spacing: -0.006em;\n padding-block: var(--wje-chip-padding-block);\n padding-inline: var(--wje-chip-padding-inline);\n margin-block: var(--wje-chip-margin-block);\n margin-inline: var(--wje-chip-margin-inline);\n text-align: center;\n cursor: pointer;\n white-space: nowrap;\n text-shadow: none;\n box-shadow: none;\n border: 0 none;\n width: 100%;\n height: 28px;\n max-width: 100%;\n min-width: 0;\n position: relative;\n transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: var(--wje-border-radius-pill);\n overflow: hidden;\n vertical-align: middle;\n box-sizing: border-box;\n background-color: var(--wje-chip-background);\n color: var(--wje-chip-color);\n &:hover {\n background-color: var(--wje-chip-background-hover);\n color: var(--wje-chip-color-hover);\n }\n}\n\n.content {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.content slot {\n display: block;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.focus) {\n box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n border: 1px solid var(--wje-color-primary-11);\n background-color: var(--wje-color-contrast-3);\n color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n outline: none !important;\n}\n\n:host([size='small']) .native-chip {\n font-size: var(--wje-font-size-small);\n height: 24px;\n padding: var(--wje-spacing-3x-small) var(--wje-spacing-x-small);\n wje-button {\n --wje-button-margin-inline: var(--wje-spacing-3x-small) 0;\n }\n}\n\n:host([size='large']) .native-chip {\n font-size: var(--wje-font-size-medium);\n height: 34px;\n padding: var(--wje-spacing-x-small) var(--wje-spacing-small);\n\n}\n\n:host([round]) .native-chip {\n border-radius: var(--wje-chip-round-border-radius);\n}\n\n.check {\n display: none;\n}\n\n:host([active]) {\n .check {\n display: block;\n margin-inline: 4px 0;\n }\n}\n\n:host([disabled]) {\n opacity: 0.5;\n border: 0;\n pointer-events: none;\n cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n width: 22px;\n height: 22px;\n}\n\n::slotted(wje-avatar:not([slot]):first-child) {\n margin-inline: -8px 8px;\n margin-top: -4px;\n margin-bottom: -4px;\n}\n\n::slotted(wje-icon:not([slot]):first-child) {\n margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:not([slot]):last-child) {\n margin: -4px -4px -4px 8px;\n}\n\n::slotted(wje-label) {\n display: block;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nslot[name='start'],\nslot[name='end'] {\n display: none;\n flex: 0 0 auto;\n align-items: center;\n min-width: 0;\n}\n\nslot[name='start'].has-content,\nslot[name='end'].has-content {\n display: inline-flex;\n}\n\nslot[name='start'].has-content {\n margin-inline-end: 8px;\n}\n\nslot[name='end'].has-content {\n margin-inline-start: 8px;\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n}\n\n::slotted(wje-avatar[slot='start']) {\n margin-inline-start: -8px;\n margin-top: -4px;\n margin-bottom: -4px;\n}\n\n::slotted(wje-icon[slot='start']) {\n margin: -4px 0 -4px -4px;\n}\n\n::slotted(wje-icon[slot='end']) {\n margin: -4px -4px -4px 0;\n}\n\nwje-button {\n flex: 0 0 auto;\n /*--wje-button-border-radius: 50%;*/\n --wje-button-margin-inline: 0.25rem 0;\n --wje-padding-top: 0.15rem;\n --wje-padding-start: 0.15rem;\n --wje-padding-end: 0.15rem;\n --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n background-color: var(--wje-color-primary-1);\n color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n background-color: var(--wje-color-complete-1);\n color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n background-color: var(--wje-color-success-1);\n color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n background-color: var(--wje-color-warning-2);\n color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n background-color: var(--wje-color-danger-1);\n color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n background-color: var(--wje-color-info-1);\n color: var(--wje-color-info-9);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n .native-chip.wje-color-primary:hover {\n background-color: var(--wje-color-primary-4);\n color: var(--wje-color-primary-10);\n }\n\n .native-chip.wje-color-complete:hover {\n background-color: var(--wje-color-complete-4);\n color: var(--wje-color-complete-10);\n }\n\n .native-chip.wje-color-success:hover {\n background-color: var(--wje-color-success-4);\n color: var(--wje-color-success-10);\n }\n\n .native-chip.wje-color-warning:hover {\n background-color: var(--wje-color-warning-4);\n color: var(--wje-color-warning-11);\n }\n\n .native-chip.wje-color-danger:hover {\n background-color: var(--wje-color-danger-4);\n color: var(--wje-color-danger-10);\n }\n\n .native-chip.wje-color-info:hover {\n background-color: var(--wje-color-info-4);\n color: var(--wje-color-info-10);\n }\n}\n";
|
|
8
8
|
class Chip extends WJElement {
|
|
9
9
|
/**
|
|
10
10
|
* Chip constructor method.
|
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.7.
|
|
4
|
+
"version": "0.7.2",
|
|
5
5
|
"homepage": "https://github.com/lencys/wj-elements",
|
|
6
6
|
"author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
|
|
7
7
|
"license": "MIT",
|