@digital-realty/ix-tile-picker 2.1.33 → 2.1.34
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.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{__decorate}from"tslib";import"@digital-realty/ix-search-bar";import"@material/web/elevation/elevation.js";import{css,LitElement,html,nothing}from"lit";import{property}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";const IxTilePickerStyles=css`:host{justify-content:space-between;align-items:center;border:1px solid #d3d3d3;border-width:1px 0;padding:1rem 0;box-sizing:border-box}*,:after,:before{box-sizing:inherit}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--tile-base-font-size,1rem) * 14),1fr));grid-gap:1em}.tile{display:flex;flex-direction:column;padding:var(--tile-padding-top,var(--tile-padding-vertical,var(--tile-padding,1em))) var(--tile-padding-right,var(--tile-padding-horizontal,var(--tile-padding,1em))) var(--tile-padding-bottom,var(--tile-padding-vertical,var(--tile-padding,0))) var(--tile-padding-left,var(--tile-padding-horizontal,var(--tile-padding,1em)));font-size:var(--tile-base-font-size,1rem);color:#333;background-color:var(--tile-background-color,#fff)}.tile.-disabled{--tile-background-color:#f5f5f5}.tile.-hidden{display:none}.tile__header{flex:0 0 auto;position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:.5em;margin-bottom:.5em;border-bottom:1px solid #d3d3d3}.tile-heading{display:flex;flex-direction:column-reverse;margin:0;padding:0}.tile-heading__label{font-size:.8125em;line-height:1.5385em;color:rgba(51,51,51,.7)}.tile-heading__value{margin:0;font-size:1.125em;line-height:1.3333em}.tile__body{flex:1 0 auto;padding-bottom:.5em}.tile__footer{flex:0 0 auto;padding:var(--tile-footer-padding-top,var(--tile-footer-padding-vertical,var(--tile-footer-padding,1em))) var(--tile-footer-padding-right,var(--tile-footer-padding-horizontal,var(--tile-footer-padding,0))) var(--tile-footer-padding-bottom,var(--tile-footer-padding-vertical,var(--tile-footer-padding,1em))) var(--tile-footer-padding-left,var(--tile-footer-padding-horizontal,var(--tile-footer-padding,0)));border-top:1px solid #d3d3d3}.tile__footer.-full-bleed{margin-left:calc(var(--tile-padding-left,var(--tile-padding-horizontal,var(--tile-padding,1em))) * -1);margin-right:calc(var(--tile-padding-right,var(--tile-padding-horizontal,var(--tile-padding,1em))) * -1);margin-bottom:calc(var(--tile-padding-bottom,var(--tile-padding-vertical,var(--tile-padding,0))) * -1);margin-top:0}.tile-radio-btn{position:relative;padding:0;border-top:none}.tile-radio-btn__input{position:absolute;top:0;left:0;opacity:0;z-index:-1}.tile-radio-btn__input:focus{outline:0}.tile-radio-btn__label{display:block;padding:1em;text-align:center;background-color:#d6eef7;background-color:var(--tile-radio-btn-bg-color,#d6eef7);color:inherit;color:var(--tile-radio-btn-text-color,inherit);cursor:pointer}.tile-radio-btn__input:focus~.tile-radio-btn__label{box-shadow:0 -4px 0 0 #007399 inset;box-shadow:0 -4px 0 0 var(--tile-radio-btn-focus-accent-color,#007399) inset}@media (hover:hover){.tile-radio-btn__label:hover{background-color:#abdcef;background-color:var(--tile-radio-btn-hover-bg-color,var(--tile-radio-btn-bg-color,#abdcef));color:inherit;color:var(--tile-radio-btn-hover-text-color,var(--tile-radio-btn-text-color,inherit))}}.tile-radio-btn__label.-checked{background-color:#09c;background-color:var(--tile-radio-btn-selected-bg-color,#09c);color:#fff;color:var(--tile-radio-btn-selected-text-color,var(--tile-radio-btn-text-color,#fff));opacity:0}.tile-radio-btn__input:checked~.tile-radio-btn__label.-checked{opacity:1;cursor:default}.tile-radio-btn__label.-disabled{background-image:repeating-linear-gradient(-30deg,transparent 0,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px);background-color:#d3d3d3;background-color:var(--tile-radio-btn-disabled-bg-color,#d3d3d3);color:#888;color:var(--tile-radio-btn-disabled-text-color,var(--tile-radio-btn-text-color,#888));cursor:not-allowed}.surface{position:relative;--md-elevation-level:2}`;class IxTilePicker extends LitElement{constructor(){super(...arguments),this.items=[],this.searchFields=[],this.foundItems=[],this.onSelectTile=void 0,this.onResultsFound=void 0,this.disabledText="Disabled",this.selectedText="Selected",this.chooseText="Choose",this.value=""}static get styles(){return[IxTilePickerStyles]}connectedCallback(){super.connectedCallback(),this.foundItems=this.items}filterTiles(i){this.foundItems=this.items.map(e=>{var t;return{...e,hidden:!(null!=(t=null==i?void 0:i.detail)&&t.items.includes(e))}}),this.onResultsFound&&this.onResultsFound(this.foundItems)}handleClick(e){e=e.target,this.value=e.value||"",this.onSelectTile&&this.onSelectTile(this.value),e=this.foundItems.find(e=>e.id===this.value);e&&this.renderRadioButtonLabel(e),this.requestUpdate()}getRadioButtonLabelText(e){return e.disabled?e.disabledButtonText||this.disabledText:e.id===this.value?this.selectedText:this.chooseText}getRadioButtonLabelClass(e){return classMap({"-disabled":(null==e?void 0:e.disabled)||!1,"-checked":e.id===this.value,"-unselected":e.id!==this.value})}renderRadioButtonLabel(e){return html`<label for="tile-${e.id}" class="tile-radio-btn__label ${this.getRadioButtonLabelClass(e)}" aria-hidden="true">${this.getRadioButtonLabelText(e)}</label>`}render(){return html`<ix-search-bar .items="${this.items}" .searchFields="${this.searchFields}" @onResultsFound="${this.filterTiles}"></ix-search-bar><div class="tiles">${this.foundItems.length?this.foundItems.map((e,t)=>html`<div class="tile surface ${classMap({"-disabled":(null==e?void 0:e.disabled)||!1,"-hidden":(null==e?void 0:e.hidden)||!1})}"><md-elevation></md-elevation><header class="tile__header" aria-hidden="true"><dl class="tile-heading" id="tileLabel${t}"><dt class="tile-heading__label"><slot name="label-${e.id}"></slot></dt><dd class="tile-heading__value"><slot name="value-${e.id}"></slot></dd></dl></header><div class="tile__body" aria-hidden="true" id="tileDescription${t}"><slot name="body-${e.id}"></slot></div><span class="tile__footer -full-bleed tile-radio-btn"><input id="tile-${e.id}" type="radio" class="tile-radio-btn__input" name="picked-tile" aria-labelledby="tileLabel${t}" aria-describedby="tileDescription${t}" .value="${(null==e?void 0:e.id)||""}" @click="${this.handleClick}" ?disabled="${e.disabled}"> ${this.renderRadioButtonLabel(e)}</span></div>`):nothing}</div>`}}__decorate([property({type:Array})],IxTilePicker.prototype,"items",void 0),__decorate([property({type:Array})],IxTilePicker.prototype,"searchFields",void 0),__decorate([property({type:Array})],IxTilePicker.prototype,"foundItems",void 0),__decorate([property({attribute:!1})],IxTilePicker.prototype,"onSelectTile",void 0),__decorate([property({attribute:!1})],IxTilePicker.prototype,"onResultsFound",void 0),__decorate([property()],IxTilePicker.prototype,"disabledText",void 0),__decorate([property()],IxTilePicker.prototype,"selectedText",void 0),__decorate([property()],IxTilePicker.prototype,"chooseText",void 0),window.customElements.define("ix-tile-picker",IxTilePicker);
|
package/package.json
CHANGED
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
"description": "Webcomponent ix-tile-picker following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "2.1.
|
|
6
|
+
"version": "2.1.34",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": "./dist/index.js",
|
|
12
12
|
"./ix-tile-picker.js": "./dist/ix-tile-picker.js",
|
|
13
|
+
"./ix-tile-picker.min.js": "./dist/ix-tile-picker.min.js",
|
|
13
14
|
"./IxTilePicker": "./dist/react/IxTilePicker.js"
|
|
14
15
|
},
|
|
15
16
|
"publishConfig": {
|
|
@@ -18,7 +19,7 @@
|
|
|
18
19
|
"scripts": {
|
|
19
20
|
"analyze": "cem analyze --litelement",
|
|
20
21
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
21
|
-
"build": "tsc && npm run analyze -- --exclude dist",
|
|
22
|
+
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
22
23
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
23
24
|
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
24
25
|
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
@@ -26,7 +27,7 @@
|
|
|
26
27
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
28
|
},
|
|
28
29
|
"dependencies": {
|
|
29
|
-
"@digital-realty/ix-search-bar": "^2.1.
|
|
30
|
+
"@digital-realty/ix-search-bar": "^2.1.34",
|
|
30
31
|
"@lit/react": "^1.0.2",
|
|
31
32
|
"@material/web": "1.2.0",
|
|
32
33
|
"lit": "^2.0.2",
|
|
@@ -47,6 +48,9 @@
|
|
|
47
48
|
"husky": "^4.3.8",
|
|
48
49
|
"lint-staged": "^10.5.4",
|
|
49
50
|
"prettier": "^2.4.1",
|
|
51
|
+
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
52
|
+
"rollup-plugin-summary": "^2.0.0",
|
|
53
|
+
"rollup-plugin-uglify": "^6.0.4",
|
|
50
54
|
"tslib": "^2.3.1",
|
|
51
55
|
"typescript": "^4.5.2"
|
|
52
56
|
},
|
|
@@ -98,5 +102,5 @@
|
|
|
98
102
|
"README.md",
|
|
99
103
|
"LICENSE"
|
|
100
104
|
],
|
|
101
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "c7668fda980293ca038c0dd061ebe350fa88ee60"
|
|
102
106
|
}
|