diff --git a/dev-app/app.html b/dev-app/app.html
index d7558d78..70ab3dfa 100644
--- a/dev-app/app.html
+++ b/dev-app/app.html
@@ -24,7 +24,7 @@
state="${link.isActive ? 'active' : ''}"
>
-
+
diff --git a/dev-app/routes/components/tile/properties/index.html b/dev-app/routes/components/tile/properties/index.html
index 28e61d77..061f0226 100644
--- a/dev-app/routes/components/tile/properties/index.html
+++ b/dev-app/routes/components/tile/properties/index.html
@@ -32,6 +32,7 @@
+
diff --git a/dev-app/routes/components/tile/properties/index.ts b/dev-app/routes/components/tile/properties/index.ts
index e11219c4..91f0d410 100644
--- a/dev-app/routes/components/tile/properties/index.ts
+++ b/dev-app/routes/components/tile/properties/index.ts
@@ -63,6 +63,17 @@ export class TileProperties {
name: 'no-image-message',
value: 'string',
},
+ {
+ default: 'info',
+ description: 'Will set the color of the pill.',
+ name: 'pill-color',
+ value: 'string',
+ },
+ {
+ description: 'Will set the text of the pill.',
+ name: 'pill-text',
+ value: 'string',
+ },
{
default: 'true',
description: 'Set if you do not need the checkbox in the tile.',
diff --git a/package-lock.json b/package-lock.json
index 71bf8b61..e02d722c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@bindable-ui/bindable",
- "version": "1.0.24",
+ "version": "1.0.25",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index eea377d2..8df64657 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@bindable-ui/bindable",
"description": "An Aurelia component library",
- "version": "1.0.24",
+ "version": "1.0.25",
"repository": {
"type": "git",
"url": "https://github.com/bindable-ui/bindable"
diff --git a/src/components/tile/c-tile/c-tile.css b/src/components/tile/c-tile/c-tile.css
index ef633d15..7185bc03 100644
--- a/src/components/tile/c-tile/c-tile.css
+++ b/src/components/tile/c-tile/c-tile.css
@@ -15,6 +15,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
* - Checked
* CHECKBOX
* DRAG
+ * PILL
* TIP
* STATE
* - Base
@@ -178,6 +179,20 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
+/*------------------------------------*\
+ !PILL
+\*------------------------------------*/
+
+.pill{
+ position: absolute;
+ top: var(--s-2);
+ left: var(--s-3);
+}
+
+
+
+
+
/*------------------------------------*\
!TIP
\*------------------------------------*/
diff --git a/src/components/tile/c-tile/c-tile.html b/src/components/tile/c-tile/c-tile.html
index 4cb25521..ca624238 100644
--- a/src/components/tile/c-tile/c-tile.html
+++ b/src/components/tile/c-tile/c-tile.html
@@ -50,6 +50,15 @@
class="${styles.status} ${styles[status]}"
if.bind="status"
>
+
+
+ ${pillText}
+
+
{
}
});
+ it('css class: pill', async done => {
+ component = StageComponent.withResources().inView('');
+
+ try {
+ await bootStrapEnvironment(component);
+ expect(component.viewModel.styles.pill).not.toBe(undefined);
+ done();
+ } catch (e) {
+ done.fail(e);
+ }
+ });
+
+ it('css class: tip', async done => {
+ component = StageComponent.withResources().inView('');
+
+ try {
+ await bootStrapEnvironment(component);
+ expect(component.viewModel.styles.tip).not.toBe(undefined);
+ done();
+ } catch (e) {
+ done.fail(e);
+ }
+ });
+
const existingStateClasses = ['processing', 'healthy', 'warning', 'error', 'info'];
existingStateClasses.forEach(state => {
it(`css class: "${state}"`, async done => {
diff --git a/src/components/tile/c-tile/c-tile.ts b/src/components/tile/c-tile/c-tile.ts
index e16edff8..78399936 100644
--- a/src/components/tile/c-tile/c-tile.ts
+++ b/src/components/tile/c-tile/c-tile.ts
@@ -33,6 +33,10 @@ export class CTile {
@bindable
public noImageMessage = 'No Image';
@bindable
+ public pillColor = 'info';
+ @bindable
+ public pillText;
+ @bindable
public searchMatch = null;
@bindable
public showCheckbox = true;