@infineon/infineon-design-system-stencil 41.0.0 → 41.0.1
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/cjs/ifx-search-field.cjs.entry.js +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +1 -1
- package/dist/collection/components/search-field/search-field.css +13 -3
- package/dist/collection/components/textarea/textarea.css +2 -2
- package/dist/components/ifx-filter-search.js +1 -1
- package/dist/components/ifx-icons-preview.js +1 -1
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-search-bar.js +1 -1
- package/dist/components/ifx-search-field.js +1 -1
- package/dist/components/ifx-select.js +1 -1
- package/dist/components/ifx-set-filter.js +1 -1
- package/dist/components/ifx-table.js +1 -1
- package/dist/components/ifx-textarea.js +1 -1
- package/dist/components/{p-D9tkkJcQ.js → p-BCj1URx0.js} +1 -1
- package/dist/components/{p-CzCl3m_w.js → p-Bn2l3HUd.js} +1 -1
- package/dist/components/{p-Da3bayS5.js → p-BxWlTGf6.js} +1 -1
- package/dist/components/{p--2w34kjl.js → p-C7HCKuDh.js} +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/ifx-search-field.entry.js +1 -1
- package/dist/esm/ifx-textarea.entry.js +1 -1
- package/dist/hydrate/index.js +2 -2
- package/dist/hydrate/index.mjs +2 -2
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-a6363d2b.entry.js → p-50fecd6c.entry.js} +1 -1
- package/dist/infineon-design-system-stencil/{p-07f4e356.entry.js → p-cc2f271d.entry.js} +1 -1
- package/package.json +2 -2
|
@@ -5,7 +5,7 @@ var index$1 = require('./index-Bp6Dd2i1.js');
|
|
|
5
5
|
var domUtils = require('./dom-utils-BdvOgC2b.js');
|
|
6
6
|
var tracking = require('./tracking-BPjaTlNR.js');
|
|
7
7
|
|
|
8
|
-
const searchFieldCss = () => `:host{display:flex}.search-field{box-sizing:border-box;background-color:#ffffff;width:100%;font-family:var(--ifx-font-family);position:relative}.search-field .suggestion-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8d8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none}.search-field .search-field__wrapper .search-field__label{display:flex;align-items:center;flex:1;min-width:0;gap:12px;margin:-8px -16px;padding:8px 16px}.search-field .search-field__wrapper:focus-visible:not(.disabled){outline:
|
|
8
|
+
const searchFieldCss = () => `:host{display:flex}.search-field{box-sizing:border-box;background-color:#ffffff;width:100%;font-family:var(--ifx-font-family);position:relative}.search-field .suggestion-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8d8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none}.search-field .search-field__wrapper .search-field__label{display:flex;align-items:center;flex:1;min-width:0;gap:12px;margin:-8px -16px;padding:8px 16px}.search-field .search-field__wrapper:focus-visible:not(.disabled){outline:none;border:1px solid #0a8276}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus,.dropdown-open){border:1px solid #575352}.search-field .search-field__wrapper.focused:not(.disabled){border:1px solid #0a8276}.search-field .search-field__wrapper .delete-icon{outline:1px solid transparent;right:12px;cursor:pointer;position:relative;z-index:1}.search-field .search-field__wrapper .delete-icon:focus-visible{border:2px solid #0a8276;outline-offset:1px}.search-field .search-field__wrapper input[type=search]{font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:16px;color:#1d1d1d;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=search]::-webkit-search-decoration,.search-field .search-field__wrapper input[type=search]::-webkit-search-cancel-button,.search-field .search-field__wrapper input[type=search]::-webkit-search-results-button,.search-field .search-field__wrapper input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.search-field .search-field__wrapper input[type=search]::-ms-clear{display:none}.search-field .search-field__wrapper input[type=search]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=search]:disabled{background:#eeeded;color:#ffffff}.search-field .search-field__wrapper input[type=search]:disabled::placeholder{color:#575352}.search-field .search-field__wrapper.disabled{background:#eeeded;border:1px solid #575352;color:#1d1d1d}.search-field .search-field__wrapper.disabled:hover{border:1px solid #575352;outline:none}.search-field .search-field__wrapper.disabled .delete-icon{cursor:default}.search-field .search-field__wrapper.disabled .delete-icon:focus-visible{outline:1px solid transparent}.search-field .suggestions-dropdown{position:absolute;top:100%;left:0;right:0;background:#ffffff;margin-top:4px;border:1px solid #eeeded;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);z-index:1000;max-height:300px;overflow-y:auto;container-type:inline-size}.search-field .suggestions-dropdown .suggestions-header{font-family:var(--ifx-font-family);font-size:0.8125rem;font-weight:600;line-height:1.25rem;letter-spacing:0.25em;text-transform:uppercase;color:#575352;border-bottom:1px solid #eeeded;padding:12px 16px}.search-field .suggestions-dropdown .suggestion-item{padding:12px 16px;cursor:pointer;transition:background-color 0.2s ease}.search-field .suggestions-dropdown .suggestion-item:last-child{border-bottom:none}.search-field .suggestions-dropdown .suggestion-item:hover,.search-field .suggestions-dropdown .suggestion-item--selected{background-color:#eeeded}.search-field .suggestions-dropdown .suggestion-item:focus-visible{outline:1px auto #0a8276}.search-field .suggestions-dropdown .suggestion-item .suggestion-content{display:flex;align-items:center;gap:12px}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon{color:#575352;flex-shrink:0}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history{color:#575352}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text{flex:1;display:flex;align-items:center;min-width:0}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope{color:#8d8786;flex-shrink:0;white-space:nowrap;margin-left:2px;font-weight:600;font-size:0.875rem}@container (max-width: 320px){.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text{flex-direction:column;align-items:flex-start}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text{width:100%;max-width:100%}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope{margin-left:0;margin-top:0;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count{color:#8d8786;margin-left:auto;flex-shrink:0}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon{opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0.2s ease;cursor:pointer;margin-left:auto;flex-shrink:0;color:#575352}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover{color:#3c3a39}.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:focus-visible{outline:none;border:1px solid #0a8276}.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon{opacity:1;visibility:visible}.search-field .search-field__wrapper.dropdown-open{border-radius:1px 1px 0 0;border-color:#0a8276}`;
|
|
9
9
|
|
|
10
10
|
const SearchField = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ var index = require('./index-BiOrxEib.js');
|
|
|
4
4
|
var domUtils = require('./dom-utils-BdvOgC2b.js');
|
|
5
5
|
var tracking = require('./tracking-BPjaTlNR.js');
|
|
6
6
|
|
|
7
|
-
const textareaCss = () => `:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1d1d1d;font:400 1rem/1.5rem "Source Sans 3";font-family:var(--ifx-font-family)}.wrapper__label .required{margin-left:4px}.wrapper__label .required.error{color:#CD002F}:host(.wrapper--disabled) .wrapper__label{color:#bfbbbb}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8d8786;border-radius:1px;padding:8px 16px;background-color:#ffffff;color:#1d1d1d;font:400 1rem/1.5rem "Source Sans 3";font-family:var(--ifx-font-family);transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:
|
|
7
|
+
const textareaCss = () => `:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1d1d1d;font:400 1rem/1.5rem "Source Sans 3";font-family:var(--ifx-font-family)}.wrapper__label .required{margin-left:4px}.wrapper__label .required.error{color:#CD002F}:host(.wrapper--disabled) .wrapper__label{color:#bfbbbb}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8d8786;border-radius:1px;padding:8px 16px;background-color:#ffffff;color:#1d1d1d;font:400 1rem/1.5rem "Source Sans 3";font-family:var(--ifx-font-family);transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0a8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #cd002f}:host(.wrapper--success) .wrapper__textarea textarea{border:1px solid #4ca460}:host(.wrapper--success) .wrapper__textarea textarea:focus-within{outline:none}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #bfbbbb;background-color:#bfbbbb;color:#ffffff}:host(.wrapper--disabled) .wrapper__textarea textarea::placeholder{color:#ffffff}.wrapper__caption{color:#1d1d1d;font:400 0.75rem/1rem "Source Sans 3";font-family:var(--ifx-font-family)}:host(.wrapper--error) .wrapper__caption{color:#cd002f}:host(.wrapper--disabled) .wrapper__caption{color:#bfbbbb}:host(.wrapper--readonly) .wrapper__textarea textarea{border:none;border-bottom:1px solid var(--color-engineering-300, #BFBBBB);padding-left:0}:host(.wrapper--readonly) .wrapper__textarea textarea::placeholder{color:#1d1d1d}:host(.wrapper--readonly) .wrapper__textarea textarea:focus-within{outline:none}`;
|
|
8
8
|
|
|
9
9
|
const TextArea = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -47,13 +47,16 @@
|
|
|
47
47
|
padding: 8px 16px;
|
|
48
48
|
}
|
|
49
49
|
.search-field .search-field__wrapper:focus-visible:not(.disabled) {
|
|
50
|
-
outline:
|
|
51
|
-
|
|
50
|
+
outline: none;
|
|
51
|
+
border: 1px solid #0a8276;
|
|
52
52
|
}
|
|
53
53
|
.search-field .search-field__wrapper.search-field__wrapper-s {
|
|
54
54
|
height: 36px;
|
|
55
55
|
}
|
|
56
|
-
.search-field .search-field__wrapper:hover:not(.focused, :focus
|
|
56
|
+
.search-field .search-field__wrapper:hover:not(.focused, :focus, .dropdown-open) {
|
|
57
|
+
border: 1px solid #575352;
|
|
58
|
+
}
|
|
59
|
+
.search-field .search-field__wrapper.focused:not(.disabled) {
|
|
57
60
|
border: 1px solid #0a8276;
|
|
58
61
|
}
|
|
59
62
|
.search-field .search-field__wrapper .delete-icon {
|
|
@@ -146,6 +149,9 @@
|
|
|
146
149
|
.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {
|
|
147
150
|
background-color: #eeeded;
|
|
148
151
|
}
|
|
152
|
+
.search-field .suggestions-dropdown .suggestion-item:focus-visible {
|
|
153
|
+
outline: 1px auto #0a8276;
|
|
154
|
+
}
|
|
149
155
|
.search-field .suggestions-dropdown .suggestion-item .suggestion-content {
|
|
150
156
|
display: flex;
|
|
151
157
|
align-items: center;
|
|
@@ -215,6 +221,10 @@
|
|
|
215
221
|
.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {
|
|
216
222
|
color: #3c3a39;
|
|
217
223
|
}
|
|
224
|
+
.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:focus-visible {
|
|
225
|
+
outline: none;
|
|
226
|
+
border: 1px solid #0a8276;
|
|
227
|
+
}
|
|
218
228
|
.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {
|
|
219
229
|
opacity: 1;
|
|
220
230
|
visibility: visible;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as i,h as a,t as r}from"./p-BT_2CyMS.js";import{d as s}from"./p-DMAv4MDG.js";import{d as l}from"./p
|
|
1
|
+
import{p as e,H as t,c as i,h as a,t as r}from"./p-BT_2CyMS.js";import{d as s}from"./p-DMAv4MDG.js";import{d as l}from"./p-C7HCKuDh.js";const f=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ifxFilterSearchChange=i(this,"ifxFilterSearchChange",7)}get host(){return this}filterName;disabled=!1;filterValue;filterKey;showDeleteIcon=!1;filterOrientation="sidebar";placeholder;ifxFilterSearchChange;valueChanged(e){this.host.setAttribute("value",""+e)}handleFilterSearchChange(e){const t=this.host.parentElement.querySelector(`ifx-filter-search[filter-name="${this.filterName}"]`);if(t&&t!==this.host)throw Error(`A search filter with the name '${this.filterName}' already exists.`);this.filterValue=e.detail,this.showDeleteIcon=""!==this.filterValue,this.ifxFilterSearchChange.emit({filterName:this.filterName,filterValue:this.filterValue,filterKey:this.filterKey})}render(){return a("div",{key:"982ffa0428ceb4cb2885b777dc817bd40a000cfa",class:"sidebar"===this.filterOrientation?"sidebar-filter-search-wrapper":"topbar-filter-search-wrapper"},a("div",{key:"3c35cdef939c00a8fb9486424f66897c1f8be6a8",class:"filter-name"},this.filterName),a("ifx-search-field",{key:"45fd2ac4eaff8f7be8a058320fdf039e2c29042b",placeholder:this.placeholder,"show-delete-icon":this.showDeleteIcon,disabled:this.disabled,value:this.filterValue}))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return".sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#eeeded}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;font-weight:600}"}},[513,"ifx-filter-search",{filterName:[1,"filter-name"],disabled:[4],filterValue:[1025,"filter-value"],filterKey:[1,"filter-key"],filterOrientation:[1,"filter-orientation"],placeholder:[1],showDeleteIcon:[32]},[[0,"ifxInput","handleFilterSearchChange"]],{value:[{valueChanged:0}]}]),h=f,c=function(){"undefined"!=typeof customElements&&["ifx-filter-search","ifx-icon","ifx-search-field"].forEach((e=>{switch(e){case"ifx-filter-search":customElements.get(r(e))||customElements.define(r(e),f);break;case"ifx-icon":customElements.get(r(e))||s();break;case"ifx-search-field":customElements.get(r(e))||l()}}))};export{h as IfxFilterSearch,c as defineCustomElement}
|