monkey-style-guide 21.0.8 → 21.0.9

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.
Files changed (6) hide show
  1. package/fesm2022/monkey-style-guide.mjs +35 -15
  2. package/fesm2022/monkey-style-guide.mjs.map +1 -1
  3. package/monkey-style-guide-21.0.9.tgz +0 -0
  4. package/package.json +1 -1
  5. package/types/monkey-style-guide.d.ts +3 -1
  6. package/monkey-style-guide-21.0.8.tgz +0 -0
package/fesm2022/monkey-style-guide.mjs CHANGED
@@ -10065,6 +10065,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
10065
10065
  * MIT Licence
10066
10066
  ************************* */
10067
10067
  class MonkeyPassNumberComponent {
10068
+ get isDisabledNumbers() {
10069
+ return this.selected?.length === 4;
10070
+ }
10071
+ get isDisabledClear() {
10072
+ return this.selected?.length === 0;
10073
+ }
10068
10074
  get id() {
10069
10075
  return this._id;
10070
10076
  }
@@ -10099,21 +10105,28 @@ class MonkeyPassNumberComponent {
10099
10105
  </div>
10100
10106
  <div class="grid">
10101
10107
  @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
10102
- <div class="button" (click)="onPress(pin)">
10108
+ <monkey-button
10109
+ size="lg"
10110
+ (click)="onPress(pin)"
10111
+ [disabled]="isDisabledNumbers"
10112
+ color="black"
10113
+ >
10103
10114
  {{ pin }}
10104
- </div>
10115
+ </monkey-button>
10105
10116
  }
10106
10117
  <div></div>
10107
- <div class="button" (click)="onPress(0)">0</div>
10108
- <div class="button secondary" (click)="clear()">
10118
+ <monkey-button size="lg" (click)="onPress(0)" [disabled]="isDisabledNumbers" color="black">
10119
+ 0
10120
+ </monkey-button>
10121
+ <monkey-button size="lg" type="secondary" (click)="clear()" [disabled]="isDisabledClear">
10109
10122
  <i class="mk-i mk-i-delete"></i>
10110
- </div>
10123
+ </monkey-button>
10111
10124
  </div>
10112
- `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }); }
10125
+ `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
10113
10126
  }
10114
10127
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MonkeyPassNumberComponent, decorators: [{
10115
10128
  type: Component,
10116
- args: [{ selector: 'monkey-pass-number', imports: [], template: `
10129
+ args: [{ selector: 'monkey-pass-number', imports: [MonkeyButtonComponent], template: `
10117
10130
  <div class="pin-selected">
10118
10131
  @for (input of [0, 1, 2, 3]; track input) {
10119
10132
  <div class="pin-input">
@@ -10123,21 +10136,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
10123
10136
  </div>
10124
10137
  <div class="grid">
10125
10138
  @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
10126
- <div class="button" (click)="onPress(pin)">
10139
+ <monkey-button
10140
+ size="lg"
10141
+ (click)="onPress(pin)"
10142
+ [disabled]="isDisabledNumbers"
10143
+ color="black"
10144
+ >
10127
10145
  {{ pin }}
10128
- </div>
10146
+ </monkey-button>
10129
10147
  }
10130
10148
  <div></div>
10131
- <div class="button" (click)="onPress(0)">0</div>
10132
- <div class="button secondary" (click)="clear()">
10149
+ <monkey-button size="lg" (click)="onPress(0)" [disabled]="isDisabledNumbers" color="black">
10150
+ 0
10151
+ </monkey-button>
10152
+ <monkey-button size="lg" type="secondary" (click)="clear()" [disabled]="isDisabledClear">
10133
10153
  <i class="mk-i mk-i-delete"></i>
10134
- </div>
10154
+ </monkey-button>
10135
10155
  </div>
10136
10156
  `, host: {
10137
10157
  'data-testid': 'monkey-pass-number',
10138
10158
  '[attr.id]': 'id',
10139
10159
  '[id]': 'id'
10140
- }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }]
10160
+ }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"] }]
10141
10161
  }], ctorParameters: () => [], propDecorators: { onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
10142
10162
  type: Input
10143
10163
  }] } });
@@ -10216,7 +10236,7 @@ class MonkeyPassSecretNumberComponent {
10216
10236
  <i class="mk-i mk-i-delete"></i>
10217
10237
  </div>
10218
10238
  </div>
10219
- `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
10239
+ `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
10220
10240
  }
10221
10241
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MonkeyPassSecretNumberComponent, decorators: [{
10222
10242
  type: Component,
@@ -10240,7 +10260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
10240
10260
  'data-testid': 'monkey-pass-secret-number',
10241
10261
  '[attr.id]': 'id',
10242
10262
  '[id]': 'id'
10243
- }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }]
10263
+ }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n"] }]
10244
10264
  }], ctorParameters: () => [], propDecorators: { onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
10245
10265
  type: Input
10246
10266
  }] } });